CSS边框应用 - 多重边框

当背景与边框还在草案阶段时,CSS 工作组内部有过很多讨论,关于是否应该允许多重边框,就像多重背景那样。不幸的是,当时一致认为这个特性并没有足够多的使用场景,而且网页开发者还可以使用border-image 来达到相同的效果。然而工作组忽略了一点:我们通常希望在CSS 代码层面以更灵活的方式来调整边框样式。可能会使用多个元素来模拟多重边框。

box-shadow

box-shadow:none | <shadow> [ , <shadow> ]*
每一个shadow的组成如下:
box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow:必要值,用来设置对象的阴影水平偏移值。可以为负值
  • v-shadow:必要值,用来设置对象的阴影垂直偏移值。可以为负值
  • blur:用来设置对象的阴影模糊值。不允许负值
  • spread:用来设置对象的阴影外延值。可以为负值
  • <color>:设置对象的阴影的颜色。
  • inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

兼容性:

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0-8.02.0-3.04.0-43.0
-webkit-
3.1-8.1
-webkit-
10.5-28.0
-webkit-
3.2-8.1
-webkit-
2.1-4.4.4
-webkit-
18.0-40.0
-webkit-
4.0-12.0
-moz-#1
9.0+4.0+10.0+5.1+10.5+5.0+4.0+18.0+

box-shadow 构成多边框

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

可以用border 属性来生成完全一样的边框效果。不过box-shadow 的好处在于,它支持逗号分隔语法,我们可以创建任意数量的投影。

.child {
    height: 400px;
    width: 400px;
    margin: 100px auto;

    background: yellowgreen;
    box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink;
}

  1. * 唯一需要注意的是,box-shadow 是层层叠加的,第一层投影位于最顶层,依次类推。因此,你需要按此规律调整扩张半径。比如说,在前面的代码中,我们想在外圈再加一道5px 的外框,那就需要指定扩张半径的值为15px(10px+5px)。
  2. *投影的行为跟边框不完全一致,因为它不会影响布局,而且也不会受到box-sizing 属性的影响。不过,你还是可以通过内边距或外边距(这取决于投影是内嵌和还是外扩的)来额外模拟出边框所需要占据的空间。
  3. *上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件,比如悬停或点击。如果这一点非常重要,你可以给box-shadow 属性加上inset 关键字,来使投影绘制在元素的内圈。请注意,此时你需要增加额外的内边距来腾出足够的空隙。

修改代码如下,下图可以看出投影不影响布局,但是会需要我们手动为其添加空间。     

.child {
    height: 400px;
    width: 400px;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink;
}



使用inset.

.child {
    height: 400px;
    width: 400px;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655 inset, 0 0 0 20px deeppink inset;
}


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页