CSS3 background-clip属性

一、定义与用法

background-clip指定绘图区的背景。

二、CSS语法

background-clip: border-box | padding-box | content-box;

1. border-box：默认值。

   背景绘制在边框方框内（剪切成边框方框）—— 背景被元素的边框外沿剪切，背景会侵入边框所在范围。

   

   .opacity-border-box {
       width: 300px;
       height: 200px;
       border: 10px dashed hsla(0, 0%, 100%, .5);
       /* background-clip: border-box; */
   }
   

2. padding-box

   背景绘制在衬距方框内（剪切成衬距方框）—— 背景被元素的边框内沿剪切。

   

   .opacity-border-box-wrap {
       background: red;
   }
   .opacity-border-box {
       width: 300px;
       height: 200px;
       border: 10px dashed hsla(0, 0%, 100%, .5);
       background-clip: padding-box;
   }
   

3. content-box

   背景绘制在内容方框内（剪切成内容方框）。

   该值效果同padding-box，暂且mark下，待进一步研究实际效果。

三、备注

文中截图效果由Google Chrome v83.0.4103.116浏览器提供。