在CSS中,你可以使用border属性为元素添加一个边框。通常情况下,每个元素只能添加一个边框。但是,有时候你想为元素添加不止一个边框,这时候该怎么做呢?
其实,CSS提供了两种方式来实现为元素添加两个边框的效果,即使用box-shadow属性和outline属性。
第一种方式:使用box-shadow属性
使用box-shadow属性可以为元素添加一个投影效果,并让这个投影看起来像是一个额外的边框。下面是一段CSS代码示例:
p {
border: 1px solid #000;
box-shadow:
0 0 0 2px #f00,
0 0 0 4px #0f0;
}
上述代码为p元素添加了一个黑色边框,然后为其添加了两个box-shadow属性,其中第一个属性值为“0 0 0 2px #f00”,它表示一个2像素宽的红色投影;第二个属性值为“0 0 0 4px #0f0”,它表示一个4像素宽的绿色投影。这样一来,p元素就会有两个像边框一样的效果,一个红色的,一个绿色的。
第二种方式:使用outline属性
outline属性也可以为元素添加一个额外的边框效果。例如:
p {
border: 1px solid #000;
outline: 2px solid #f00;
}
上述代码为p元素添加了一个黑色边框,然后为其添加了一个红色的outline属性,它的值为“2px solid #f00”。这样一来,p元素就会有两个像边框一样的效果,一个黑色的,一个红色的。
可是,当你使用两种方式中的任意一个时,你会发现两个边框并没有完全重叠在一起,它们之间会留出一部分间隔。这是因为border和outline属性相互独立,它们并没有同步,因此无法完美地重叠在一起。
如果你希望两个边框能够紧密地连接在一起,那么你可以将它们的值设为相同,例如:
p {
border: 2px solid #f00;
box-shadow: 0 0 0 2px #f00;
outline: 2px solid #f00;
}
上述代码为p元素添加了一个2像素宽的红色边框、一个2像素宽的红色投影和一个2像素宽的红色outline属性。这样一来,这三个效果就会完美地重叠在一起,形成一个类似于双倍粗的边框效果。
总之,使用box-shadow属性和outline属性是在元素添加额外边框的两种比较方便的方法,如果希望它们能完美地重叠在一起,就需要将它们的值都设为相同值。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。