第css實現(xiàn)可控虛線的方法前言

css生成虛線，前端小兒科。一般都會用border來實現(xiàn)，不做深入考究，但是生成如下虛線？如何操作？

實現(xiàn)方式

實現(xiàn)方式，有的人用多個span生成，一個小圓點就是一個span，這樣是可以，但是整個狀態(tài)改變比較麻煩，有什么方式生成可以控制的虛線呢？

生成dashed

生成橫向線

生成dashed虛線，一般是通過linear-gradient+background-size實現(xiàn)的，實現(xiàn)代碼如下：

height:2px;

background:linear-gradient(toright,#000000,#0000007.5px,transparent7.5px,transparent);

background-size:15px100%;

height，控制虛線的高度，linear-gradient和background-size控制間距和步長

生成豎向線

豎向線和橫向線正好相反，倒過來就可以了

width:2px;

background:linear-gradient(tobottom,#000000,#0000007.5px,transparent7.5px,transparent);

background-size:100%15px;

延伸

橫向線和豎向線都有了，那么是不是就有了加減號了？

css生成加減號按鈕

.btn{

display:inline-block;

background:#f0f0f0no-repeatcenter;

border:1pxsolid#d0d0d0;

width:24px;height:24px;

border-radius:2px;

box-shadow:01pxrgba(100,100,100,.1);

color:#666;

transition:color.2s,background-color.2s;

.btn:active{

box-shadow:inset01pxrgba(100,100,100,.1);

.btn:hover{

background-color:#e9e9e9;

color:#333;

.btn-plus{

background-image:linear-gradient(totop,currentColor,currentColor),linear-gradient(totop,currentColor,currentColor);

background-size:10px2px,2px10px;

.btn-minus{

background-image:linear-gradient(totop,currentColor,currentColor);

background-size:10px2px;

ahref=javascript:>

生成dotted

上面是生成線，是沒有圓角的，假如生成小圓點怎么生成呢？

如下圖

同樣，用radial-gradient漸變可以生成

代碼如下：

height:29px;

background:radial-gradient(#000000,#0000004px,transparent4px,transparent);

background-size:29px100%;

備注：這里，小圓點的寬高是由radial-gradient得到的height變小，小圓點就會壓扁，變成橢圓，如下圖

擴展

關于CSS3gradient漸變可以實現(xiàn)很多其他的效果，例如空心對話框的三角。

如下：

代碼如下：

width:6px;height:6px;

background:linear-gradient(totop,#ddd,#ddd)no-repeat,linear-gradient(toright,#ddd,#ddd)no-repeat,linear-gradient(135deg,#fff,#fff6px,hsla(0,0%,100%,0)6px)no-repeat;

background-size:6px1px,1px6px,6px6px;

transform:rotate(-45deg);

這種空心三角實現(xiàn)用漸變是很不錯的，實心三角，肯定首選border，空心三角也可以用birder2邊，通過旋轉來實現(xiàn)，但是有一定的局限性。

以上