以下是完整代碼，拷貝到編輯器即可使用

html>

帶四角的邊框

body?{

background:?#00AB68;

text-align:?center;

}

#box?{

position:?relative;

margin:?120px?auto;

width:?400px;

height:?100px;

font-family:?KaiTi;

font-size:?18px;

line-height:?100px;

font-weight:?bold;

color:?#fff;

}

.content?{

position:?absolute;

width:?100%;

height:?100%;

border:?1px?solid?#c0c0c0;

}

.content?>?div?{

position:?absolute;

width:?10px;

height:?10px;

}

.lt?{

left:?-3px;

top:?-3px;

border-top:?3px?solid?#c0c0c0;

border-left:?3px?solid?#c0c0c0;

}

.rt?{

right:?-3px;

top:?-3px;

border-top:?3px?solid?#c0c0c0;

border-right:?3px?solid?#c0c0c0;

}

.rb?{

bottom:?-3px;

right:?-3px;

border-bottom:?3px?solid?#c0c0c0;

border-right:?3px?solid?#c0c0c0;

}

.lb?{

bottom:?-3px;

left:?-3px;

border-bottom:?3px?solid?#c0c0c0;

border-left:?3px?solid?#c0c0c0;

}

人間四月芳菲盡，山寺桃花始盛開。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css 不规则边角_如何实现带有边角的CSS边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。