今天深入了解了一下css中背景与边框的知识。其中linear-gradient(线性渐变)、box-shadow与radial-gradient(径向渐变)在边框,背景的实现上起着不可忽视的作用。下面分点总结,归纳:
- 边框与背景的关系:
在如下情景中,我们想要为一个白色背景的图像加上一层白色的边框如下图二:
图一 图二
通常我们利用以下CSS代码实现功能:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
但是发现效果并不好,半透明白色边框没有出现,反而发现白色区域变大了就像上图一一样。原来是背景会延申到边框下部分,边框在上,两层是重叠的,如示意图三:
图三
半透明白色无法覆盖白色的背景,使得效果全无。我们需要将边框部分背景裁剪掉。加入裁剪背景的CSS代码:
background-clip: padding-box;
让背景仅对齐内部padding区域,如图二的效果就实现了。
- 多重边框的实现:
在实际应用中,我们往往需要对一个区域叠加多重边框,如下图四:
图四
方法一:
可以看到图四中有一层虚线内边框,2层外边框。在常规CSS中仅仅提供一个border属性控制单个边框,对于多个边框的情况,我们就需要借助outline和box-shadow来实现。
box-shadow一般用于生成阴影,不太为人所知的是,它还接受第四个参数(称作“扩张半径”),通过指定正值或负值,可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的“投影”其实就像一道实线边,就像下图五。我们多次叠加,扩大这个实色阴影就可以生成多个模拟的外边框。
同时我们还可以在最后一层边框外再加一层投影,实现立体效果,如下图六。
图五 图六
利用CSS代码,可实现如上图效果:
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
方法二:
但是有时候我们可能只需要2层边框,或是需要内边框,我们就可以利用outline属性来进行描边:
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
效果如下图七:
图七
但是这个方案有需要注意的地方:它只适用于双层“边框”的场景,因为 outline 并不能接受用逗号分隔的多个值。如果我们需要获得更多层的边框,前一种方案就是我们唯一的选择。同时outline描出的边框是不会去拟合区域圆角的。
- 条纹背景的实现(linear-gradient的妙用)
在web实现的具体环境我们通常会有条纹背景的需求。
如下图八、图九:
图八 图九
而CSS本身并不提供类似的方法。我们只能利用其他属性来模拟类似效果。其中linear-gradient属性通过调整属性值就可以实现该效果:
如图八的CSS代码为:
width:20%;
height:100px;
margin-top: 20px;
margin-left: 450px;
background: linear-gradient(to right,#fb3 50%, #58a 50%);
background-size: 30px 100%;
要想竖向地实现条纹,我们只需要旋转90度。如下:
background: linear-gradient(90deg,#fb3 50%, #58a 50%);
同理如下的图十、图十一可以利用层叠实现:
图十 图十一
width:20%;
height:100px;
margin-top: 20px;
margin-left: 550px;
background-image: linear-gradient(
rgba(255,215,0,.5) 50%,transparent 0),
linear-gradient(90deg,
rgba(255,215,0,.5) 50%,transparent 0);
background-size:100% 30px, 30px 100%;