边框与背景 :background-clip 【2019-06-26 16:33更新】

边框与背景 :background-clip

.NET

653 2017/9/13 17:11


  默认情况下,背景会延伸到边框所在区域的下层。如 图1-1 深色背景在浅色虚线的下层。

                                                                   图1-1


     那我们如果想要背景完全展示出来或者想给他加个透明边框,该如何处理呢?

     我们可以通过 background-clip 属性来调整这种默认行为带来的不便。

     background-clip共有三个值:

             border-box(默认值):背景会被元素的border-box(边框外沿线)裁切掉。如 图1-1

             padding-box:背景会被从内边距的外沿线裁切掉。如 图1-2,图1-3

             content-box:背景会被从内容的外沿线裁切掉。如 图1-4

                                                                    图1-2


     

                                                               图1-3


                                                                         图1-4



上一篇 下一篇
music cover

歌曲名称

作者

00:00/00:00

歌名 歌手 时长