--愿你内心有种不灭的火焰,将你与别人区分开来--

0%

背景与边框

CSS 背景与边框

0x00 半透明边框

背景知识 RGBA/HSLA 颜色

在CSS3里我们可以使用RGBA和HSLA两种色彩模式,二者均可以用来在设置颜色的同时指定其它透明度。RGBA指的是“红色、绿色、蓝色和Alpha透明度”,而HSLA则代表“色调、饱和度、亮度和Alpha透明度”。

在RGBA模式里,前三个参数分别是红色、绿色和蓝色的强度值,取值从 0~255 或 0%~100% (最常见的是 0~255, 而非百分数形式)。而在HSLA模式里,前三个参数则分别代表色调( 0~360 )、饱和度( 0%-100% )和亮度( 0%~100% )。RGBA和HSLA第四个参数都是透明度,取值从0(完全透明)到1(完全不透明)。

CSS3仍有opacity属性,但它的作用是使整个元素都半透明,包括前景内容,而不仅是背景。

解决方案

需要知道的是,在默认情况下,背景会延伸到边框所在区域的下层。所以即使我们给边框设置了半透明的效果,那么从视觉上也是无法分辨的。所以,如果我们不希望背景侵入边框所在的范围,就需要使用到 CSS3 的 background-clip 背景切割属性,将它的值设置为 padding-box

1
2
3
border: 10px solid hsla(0%, 0%,100%,.5);
background:white;
background-clip:padding-box;

0x01 多重边框

box-shadow

不为人知的是,box-shadow 还可以接受第四个参数(称为”扩展半径”),通过指定正值或者负值,可以让投影面积加大或者减小。

一个正值的扩展半径加上两个为零的偏移量以及为零的模糊值,得到的投影其实就像是一道实线边框了,在加上 box-shadow 的最大好处,可以支持逗号分隔发法,那么我们便可以为其创建任意数量的投影了。

1
2
3
4
5
6
div{
height: 200px;
width: 200px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0, 0.6);
}

多重边框+投影

outline

有时当我们只需要两层边框的时候,便可以使用 outline 属性来产生外层的边框,这种方案会变得非常灵活,而不同于 box-shadow 只能模拟实现边框。

1
2
3
4
5
6
7
div{
height: 200px;
width: 200px;
border: 20px solid #655;
border-radius: 10px;
outline: 5px dashed deeppink;
}

outline

描边的另一属性 outline-offset 还可以控制它更元素边缘之间的间距,这个属性可以接受负值。

1
2
3
4
5
6
7
8
div{
height: 200px;
width: 200px;
border: 20px solid #655;
border-radius: 10px;
outline: 5px dashed deeppink;
outline-offset: -25px;
}

outline-offset

但是,IE8 以下的并不支持 outline-offset 属性。

0x02 背景定位

背景定位

有时,我们希望背景图片与容器的边角之间留出一定的空隙(类似内边距的效果),在 CSS2 的时代要实现这一点是很麻烦的。但是在 CSS3 的时代 background-position 属性已经得到了很好的扩展,并且当结合 background-origin 属性使用时,将发挥出更大的创造力。

在 CSS3 中,background-position 允许我们指定背景图片距离任意角的偏移量,只需我们在偏移量前指定关键字就好了。

需要知道的是,background-position 在默认情况下是以 padding-box 为基准的,不过,我们可以使用 CSS3 中一个新的属性 background-origin 来改变这种默认行为。background-origin 默认值同样为 padding-box,其它可以接受的值是,content-box 和 border-box。

1
2
3
4
5
6
7
8
9
10
#box{
width:500px;
height:500px;
border:20px solid rgba(0,0,0,0.5);
background: url(img/adver2.jpg) no-repeat ;
/*background-clip:content-box; */
background-position: right 20px bottom 10px;
background-origin: content-box;
padding:40px;
}

如此,我们在 background-position 中使用的边角关键字将会以内容区的边缘作为基准。

0x03 边框内圆角

一个灵活的方法是使用两个嵌套的 div 来实现边框内圆角的效果。

1
2
3
4
5
6
7
8
9
10
#box{
background:#655;
padding:0.8em;
}

#subBox {
background: tan;
padding:0.8em;
border-radius:0.8em;
}

边框内圆角

0x04 条纹背景

背景知识 CSS3 渐变中的百分比

在 CSS 渐变属性中使用百分比的作用是指某个颜色距离起点的起始位置。默认的渐变样式为从上往下,所以当某个颜色值设置了百分比后,便会从距离顶端相关的距离(百分比计算)开始填充实色。而渐变是也有空间占比的,渐变过渡区的占比为总的空间(高度或宽度)减去上下两个着色块空间占比剩下的空间。

红色 30% 橙色70%的渐变过渡占比为

图片

但若是前面有比当前的颜色值百分比大的,会自动将当前颜色值的百分比设置为前面颜色中的最大百分比值。

此外,默认情况下,还会根据颜色的个数来为每个颜色设置百分比,最后一个颜色的百分比值就是100%,而起始的值就是0%,中间如果再有多个颜色值,则根据100/(个数-1)平均下去。

如此,便可以做出一个简单的多重颜色线条的背景来:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#box{
width:400px;
height:200px;
background:linear-gradient(
red 0,
red 14.3%,
orange 0,
orange 28.6%,
yellow 0,
yellow 42.9%,
green 0,
green 57.2%,
blue 0,
blue 71.5%,
indigo 0,
indigo 85.8%,
purple 0,
purple 100%);
}

颜色要设置两次,是因为每个颜色需要一个起始着色点,然后还需要将两个颜色之间的渐变过渡区域覆盖为实色,消除过度效果。

图片

水平条纹

渐变是一种由代码生成的图像,我们能想对待其他任何背景图像那般来对待他,比如对其使用 background-size 来调整其大小。

1
2
3
4
5
6
7
8
9
10
div{
width:200px;
height: 200px;
background:linear-gradient(
#fb3 50%,
#58a 0
);
background-clip:padding-box;
background-size: 20px 100%;
}

图片

### 垂直条纹

1
2
3
4
5
6
7
8
9
10
11
div{
width:200px;
height: 200px;
background:linear-gradient(
to right,/*or 90deg*/
#fb3 50%,
#58a 0
);
background-clip:padding-box;
background-size: 100% 20px;
}

图片

斜向条纹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div{
width:200px;
height: 200px;
background:linear-gradient(
45deg,
#fb3 0,
#fb2 25%,
#58a 0,
#58a 50%,
#fb3 0,
#fb3 75%,
#58a 0,
#58a 100%
);
background-clip:padding-box;
background-size: 20px 20px;
}

如果我们需要为背景添加斜向条纹,那么便需要为贴片( 20px,20px)设置完整的色标。不幸的是,这种方法并不完美,当我们尝试改变渐变的角度时,看起来会很糟糕。幸运的是,还有更好的方法来创建斜向条纹,即 repeating-linear-gradientrepeating-radial-gradient,循环式的重复渐变。

如此,便再也无须担心如何去创建无缝拼接的贴片。并且,我们会直接在渐变的色标中指定长度,而不是原来的 bakcground-size ,这里的长度是直接在渐变轴上进行度量的,它直接代表了条纹自身的宽度,对渐变来说就是以整个元素的范围进行填充。

1
2
3
4
5
6
7
8
9
10
11
div{
width:200px;
height: 200px;
background:repeating-linear-gradient(
45deg,
#fb3 0,
#fb2 15px,
#58a 0,
#58a 30px
);
}

图片

需注意的是在这个方法中,如果我们想要创建双色条纹,那么便需要使用四个色标才行。

同色系条纹

1
2
3
4
5
6
7
8
9
10
11
12
div{
width:200px;
height: 200px;
background: deeppink;
background-image: repeating-linear-gradient(
30deg,
hsla(0,0%,100%,0.3),
hsla(0,0%,100%,0.3) 15px,
transparent 0,
transparent 30px
);
}

我们首先为其指定了一个主色系的背景颜色,然后把半透明白色的条纹叠加在主色系背景之上得到浅色条纹。

图片