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

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;

}

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。