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>

具体效果见 链接


angelayun
420 声望64 粉丝

react15.5.4中文文档:[链接]