写点什么

【CSS】多重边框

用户头像
学习委员
关注
发布于: 2021 年 01 月 17 日
【CSS】多重边框

这个笔记参考了《CSS揭秘》

方法 1:box-shadow

要设置多重边框,最要用到的是 box-shadow 这个样式。

box-shadow 的作用是添加投影。

<style>div {  width: 300px;  height: 300px;  margin: 100px auto;  background: #c33;  border: 10px solid #036;  color: #fff;  font-size: 30px;  text-align: center;  line-height: 300px;  box-shadow: 5px 5px 10px #888;}</style>
复制代码



如果要设置多个阴影,还可以用逗号进行分别设置。

<style>div {  width: 300px;  height: 300px;  margin: 100px auto;  background: #c33;  border: 10px solid #036;  color: #fff;  font-size: 30px;  text-align: center;  line-height: 300px;  box-shadow: 5px 5px 10px #888, 10px 10px 10px #9c0;}</style>
复制代码



正常添加阴影的话,填好以上参数就行。

box-shadow: 5px 5px 10px #888;
复制代码
  • 第一个参数:横向偏移的值(负左,正右)

  • 第二个参数:纵向偏移的值(负上,正下)

  • 第三个参数:投影的半径,也就是羽化。值越大,模糊和扩散的程度越大。


多重边框

要用 box-shadow 来设置多重边框,需要用到 box-shadow 另一个不常用的参数(扩张半径),同时前 3 个参数要设置为 0。即偏移量和模糊值都为 0。

<style>div {	width: 300px;	height: 300px;	margin: 100px auto;	background: #c33;	border: 10px solid #036;	color: #fff;	font-size: 30px;	text-align: center;	line-height: 300px;	box-shadow: 0 0 0 10px #9c0;}</style>
复制代码



如果需要设置多重边框,可以用逗号分隔语法,这样就可以创建任意数量的投影了。

box-shadow: 0 0 0 10px #9c0 , 0 0 0 20px #ffc, 0 0 0 30px #9cf;
复制代码



需要注意的是,box-shadow 是层层叠加的,也就是说第一层投影位于顶层,以此类推。因此,需要做的是按照这个规律来调整扩张的半径。


就比如在这个例子中,第一个投影用了 10px,第二个投影就要用大于 10px 的值才能看出效果,除非前一个投影设置了半透明颜色。


缺点:

box-shadow 设置的多重边框最大的缺点就是不能设置虚线等其他样式的边框。




方法 2:outline


如果只是需要 2 层边框,可以先设置一层常规边框 border ,再加上 outline(描边)属性来产生外层的边框。


outline 设置参数的方法和 border 是一样的。

<style>div {  width: 300px;  height: 300px;  margin: 100px auto;  background: #c33;  color: #fff;  font-size: 30px;  text-align: center;  line-height: 300px;  border: 10px solid #036;  outline: 10px solid #9c0;}</style>
复制代码



outline 还可以设置成虚线,同时通过 outline-offset 可以设置 outline 和元素边缘之间的距离。

<style>div {	width: 300px;  height: 300px;  margin: 100px auto;  background: #369;  color: #fff;  font-size: 30px;  text-align: center;  line-height: 300px;  outline: 2px dashed #fff;  outline-offset: -16px;}</style>
复制代码



outline 设置成 2 像素的白色虚线。

通过 outline-offset 方法把 outline 设置在元素内部(负值),此时看上去就有点像是缝边的效果。


缺点:

用 outline 设置的边框不能产生圆角效果。也就是不会贴合元素的圆角。



用户头像

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

评论

发布
暂无评论
【CSS】多重边框