边框半透明
给一个div设置半透明的边框
理想效果
body {
background: rgba(129, 21, 21, 0.5);
}
div {
border: 10px solid rgba(36, 201, 71, 0.5);
background: blue;
background-clip: padding-box;
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
font: 100%/1.5 sans-serif;
}
默认情况下，背景颜色会延伸到边框所在区域的下层
这时需要border-clip属性来调整
border-box(默认)
padding-box（理想状态）给该div padding出border的区域，底下的背景色也不会铺进来
content-box 只给有内容的地方加背景色，其余的都不管
