用css實現(xiàn)自定義虛線邊框

開發(fā)產(chǎn)品功能的時候ui往往會給出虛線邊框的效果圖,于是乎,我們往往第一時間想到的是用css里的border,可是border里一般就提供兩種效果,dashed或者dotted,ui這時就不滿意了,說虛線太密了。廢話不多說,下面直接給解決方案(參考css揭秘):

div {

padding: 1em;

border: 1px dashed transparent;

background: linear-gradient(white,white) padding-box,

repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em,white 0,white 0.75em);

}
參考圖:


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 今天在掘金上看見了一樓主自定義的虛線邊框,感覺很不錯,學(xué)習(xí)了 hdj div { padding: 1em;...
    Dolores_520閱讀 1,332評論 0 0
  • 1.CSS簡介 Cascading Style Sheet 層疊樣式表 主要用來定義頁面中的表現(xiàn),HTML 描述頁...
    hyt222閱讀 1,001評論 0 0
  • 這篇文字里我會介紹50 個便于使用的 CSS2/CSS3 代碼片段給所有的WEB專業(yè)人員. 選擇IDE開發(fā)環(huán)境來存...
    JamHsiao_aaa4閱讀 1,576評論 0 3
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,297評論 0 11
  • 一、CSS中的屬性和取值 1.文本類屬性: text-align屬性:此標(biāo)簽內(nèi)容的水平對齊方式,內(nèi)容須為具體文字/...
    劉遠(yuǎn)舟閱讀 680評論 0 1

友情鏈接更多精彩內(nèi)容