首页 > 开发 > CSS > 正文

实例讲解使用CSS实现多边框和透明边框的方法

2024-07-11 08:29:45
字体:
来源:转载
供稿:网友

CSS多边框

Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image属性来模拟。不过,WG显然忘记了在 CSS 代码中灵活地调整边框,才是我们需要的,现在开发者只能使用一些Hack手段来模拟多重边框,比如使用多重元素的嵌套来模拟多重边框。现在,我将告诉你一些更优秀的方法,无需使用多余的标签即可实现多重边框。

box-shadow解决方案

现在,大多数的时候都用box-shadow来创建阴影。不过,很少有人知道它还接受第四个参数(spread),该参数可以缩放阴影的范围。比如下面的示例,我们创建了一个水平和垂直偏移量为0 的阴影,它就使用了上述所说的第四个参数:

CSS Code复制内容到剪贴板
  1. background: yellowgreen;    box-shadow: 0 0 0 10px #655;  

效果如下图所示:
201598162333022.png (218×160)

图注:使用 box-shadow 模拟边框线

这还不够令人惊讶,因为它和我们使用 border 创建的边框差不多。不过,强大的是我们可以使用逗号来创建任意数量的阴影。所以,只需要继续添加阴影就可以实现多重阴影了,比如,添加一个颜色为 deeppink 的边框:

CSS Code复制内容到剪贴板
  1. background: yellowgreen;    box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;  

唯一需要牢记的事情就是,box-shadow 属性是叠在一起的,第一个阴影总是位于最顶层,所以你需要调整阴影的大小。比如,在上一段代码中,我们希望最外层的边框为 5px,那么我们就可以设置一个 15px(10px + 5px) 的阴影。如果你需要,那么就可以为指定任意层次的阴影:

CSS Code复制内容到剪贴板
  1. background: yellowgreen;    box-shadow: 0 0 0 10px #655,   
  2.             0 0 0 15px deeppink,                0 2px 5px 15px rgba(0,0,0,.6);  

除了下述的少数情况外,使用 box-shadow 的解决方案都很好用:

阴影并不是边框,它们并不占有实际的空间,也不能归属于 box-sizing 的范围。不过,你可以通过使用内边距或外边距(取决于阴影是内部的还是外部的)占据额外的空间来模拟。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表