html邊框終點圓點,CSS設置虛線或虛邊框dashedborder

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% 表示透明度。

-