《css揭秘》之背景与边框

 

这本书是魔法哥的译著,也是买了有很长时间了,现在开始慢慢阅读,确实比较新颖,包含了很多css方面的小tips。来一点点的做个总结。

半透明边框的实现:

关于半透明我们可能会想到使用rgba,opacity等等,对于背景提供回退方案还是比较好做的,要么利用一张单像素半透明图片,要么回退到实色。但是对于其他属性,比如边框我们就只能回退到实色了。甚至到ie都要利用滤镜了。好了言归正传。

我们写了如下代码:

        <div class="container">
            <div class="test1">wretyui</div>
        </div>
.container{background: lightblue;}
.test1{
  width: 200px;height: 150px;
  border: 10px solid hsla(0,0%,100%,.5);
  background: white;
}

来打开浏览器一看,白茫茫的一片,说好的半透明的白色边框去哪了。

这里就要知到背景的渲染机制了,在默认情况下,背景颜色也会蔓延到边框上。来段代码证明一下。

<div class="test" style="width: 200px;height: 150px;background: red;border: 10px dotted blue;"></div>

看见了没,background蔓延到了border上,所以当我们上面那段代码实质就是,白色的背景蔓延到了半透明的border上,导致border也变成了白色。我们为了不让background背景色蔓延出去,我们就要利用background-clip这个属性:增加如下代码。

background-clip: padding-box;

 

 background-clip:https://www.w3.org/TR/css3-background/#background-clip

书本配套所有demo:http://play.csssecrets.io/

 

多重边框的实现

 以往我们实现多重边框,可能会通过div的嵌套来实现,这样做很容易但是问题就是DOM浪费,而且还有令人厌恶的居中问题,这里又提供了其他的实现方案。

box-shadow方案:

关于box-shadow我们已经不陌生了。但是用它来做边框可能还很少见。

           .test2{ /*这种的好处就是可以一直叠加,但是投影并不占据真正的空间,不会影响布局,不会受到box-sizing的影响*/
                width: 200px;height: 150px;
                background: yellowgreen;
                box-shadow: 0 0 0 10px deeppink inset,
                            0 0 0 20px blue ;
            }

我们可以看到实现很容易,但是我们要知道通过box-shadow产生的“边框”并不占据真正的空间,不影响布局,所以我们如果需要占据空间,那么就需要通过内边距或者外边距模拟出需要占据的空间。

再来看一下这几个框的结构层次图

          .test2{ /*这种的好处就是可以一直叠加,但是投影并不占据真正的空间,不会影响布局,不会受到box-sizing的影响*/
                width: 200px;height: 150px;
                margin: auto;
                background: yellowgreen;
                box-shadow: 0 0 0 10px deeppink inset,
                       0 0 0 20px blue ;
                padding: 50px;
                border: 20px solid;
            }
            

 

 

outline方案:

有时候可能只需要两层边框,那么我们可以利用outline描边来做,而且利用outline可以实现虚线边框效果,而像上面的box-shadow则不能办到。

           .test3{ 
                width: 200px;height: 150px;
                background: yellowgreen;
                border: 3px solid red;
                outline: dotted 5px blue;
            }

outline产生的“边框”也是不会占据空间的。正常情况下outline产生的“边框”是在真正的边框外面的。

当我们增加圆角时

border-radius: 20px;

 

 我们发现outline产生的“边框”并不会变成圆角。那么通过box-shadow产生的边框呢,是可以的。但是只有设置为outset的box-shadow会,设置为inset则不会产生圆角。

另外我们可以通过outline-offset来控制outline跟元素边缘之间的位置。那么我们就很容意实现缝边效果。

outline参考资料:http://tympanus.net/codrops/css_reference/outline/

 当然多重边框的实现还有其他方式:

https://www.impressivewebs.com/multiple-borders-css/

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

 

边框内圆角

直接看代码吧

           <div class="demo"></div>
           .demo{
                width: 200px;
                height: 100px;
                background: lightcoral;
                border-radius: 20px;
                outline: 10px solid lightblue;
                box-shadow: 0 0 0 8px lightblue;
            }

原理就是利用上面的outline产生的边框是不随border-radius而产生圆角的,而且由outline和box-shadow产生的边框是不会占据空间的。所以这里是不能用border来代替box-shadow,因为border会占据空间,outline会随border扩张。

 

posted @ 2016-11-07 15:07 DJL箫氏 阅读(...) 评论(...) 编辑 收藏