2023年12月6日發(作者:跑的成語)

html邊框終點圓點,CSS設置虛線或虛邊框dashedborder
在網頁前端設計過程中,少不了要使用邊框,這樣頁面整體好看一些。邊框通常分為兩種,一種為實邊框另一種為虛邊框,實邊框用得多一
些,但有虛線或虛線邊框點綴,網頁會更漂亮,所以這兩種邊框都要使用。
在CSS中,設置邊框用border屬性,通常需要設置三個值,分別為:寬度、線條樣式和顏色。把線條設置為實線或虛線主要設置線條樣
式,它主要有兩個值,即:solid 和 dashed,前者表示實線,后者表示虛線。
一、CSS設置虛線
html代碼:
CSS設置虛線
使用dashed
CSS樣式:
.uldashed{border:1px solid #c22159; width:300px; height:60px;margin:0;padding:0; line-height:26px;}
.uldashed li{border-bottom:1px dashed #c22159;list-style:none;}
效果圖:CSS設置虛線
使用dashed
以上CSS樣式是給ul的每一行設置一條虛線,虛實結合比單用實線好看得多。在實際應用中,最后一行的虛線要隱藏掉,這樣美觀一些,只
要再設置一個CSS樣式把 border-bottom 設置為 none 即可。
二、CSS設置虛線邊框
html代碼:
CSS設置一虛線
使用dashed
CSS樣式:
.uldashedborder{border:1px dashed #c22159; width:300px; height:60px;margin:0;padding:0; line-height:26px; padding-
bottom:23px;}
.uldashedborder li{border-bottom:1px solid #c22159;list-style:none;}
效果圖:CSS設置一虛線
使用dashed
以上的CSS樣式是把邊框設置為虛線,把行的底部設置為實線,跟上邊恰好相反,效果沒有上邊的好看。一般來說,虛線常常用于實線邊框
內。
三、CSS 長虛線邊框
html代碼:
長虛線邊框
CSS樣式:
.longDashedBorder{position:relative; margin:68px 0 0 130px; height:44px;width:86px; display:inline-block; border:dashed
1px #b200ff; transform:scale(4); overflow:hidden;}
.text{position:relative; margin:-54px 0 0 -106px; float:left; height:150px;width:300px; line-height:28px; display:inline-block;
transform:scale(0.28);}
效果圖:
以上長虛線邊框用 Css 放大屬性 scale 實現,這樣虛線會增長但不會加寬;如果只增長 X 軸方向,可以用 scalex;如果只增長 Y 軸方
向,可以用 scaley。使用 scale,除放大邊框外,還放大其它元素,需要把它們調回來,比較麻煩。
四、CSS 虛線間距
html代碼:
CSS樣式:
.dashedSpace {
width:350px;
height:1px;
margin-top:10px;
background-image:linear-gradient(to right, #b200ff 0%, #b200ff 50%, transparent 50%);
background-size:28px 1px;
background-repeat:repeat-x;
}
.linear {
background-image: linear-gradient(to right, #ccc 0%, #b200ff 50%, transparent 50%);
background-size:40px 1px;
}
效果圖:
dashed 樣式的虛線不能調間距,只能用漸變生成函數 linear-gradient(),to right 表示從左到右漸變,#ccc 0% 表示起點顏色和顏色百
分比,#b200ff 50% 表示終點顏色和顏色百分比,transparent 50% 表示透明度。
本文發布于:2023-12-06 16:37:12,感謝您對本站的認可!
本文鏈接:http://m.newhan.cn/zhishi/a/1701851832112944.html
版權聲明:本站內容均來自互聯網,僅供演示用,請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系,我們將在24小時內刪除。
本文word下載地址:html邊框終點圓點,CSS設置虛線或虛邊框dashedborder.doc
本文 PDF 下載地址:html邊框終點圓點,CSS設置虛線或虛邊框dashedborder.pdf
| 留言與評論(共有 0 條評論) |