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;

}

人间四月芳菲尽，山寺桃花始盛开。