css 不规则边角_如何实现带有边角的CSS边框

以下是完整代码，拷贝到编辑器即可使用

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边框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。