1、默认状态下,背景会延伸到边框的区域下层
2、可以通过 background-clip 属性来调整上述默认行为所带来的不便;这个属性的初始值是 border-box, 意味着背景会被元素的 border box(边框的外沿框) 裁切掉
实现半透明边框代码如下:
body {
background-image: url('./images/stone-art.jpg')
}
div {
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
font: 100%/1.5 sans-serif;
/* 通过border设置a通道 然后background-clip: padding-box */
background-color: #fff;
border: 10px solid hsla(0, 0%, 100%, .5);
background-clip: padding-box
}
<div>
Can I haz semi-transparent borders? Pretty please?
</div>
具体效果见 链接
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。