title: 背景与边框
date: 2016-10-16
tags: CSS Secrets
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。
border: 10px solid hsla(0%, 0%,100%,.5);
background:white;
background-clip:padding-box;
0x01 多重边框
box-shadow
不为人知的是，box-shadow 还可以接受第四个参数(称为"扩展半径")，通过指定正值或者负值，可以让投影面积加大或者减小。
一个正值的扩展半径加上两个为零的偏移量以及为零的模糊值，得到的投影其实就像是一道实线边框了，在加上 box-shadow 的最大好处，可以支持逗号分隔发法，那么我们便可以为其创建任意数量的投影了。
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 只能模拟实现边框。
div{
height: 200px;
width: 200px;
border: 20px solid #655;
border-radius: 10px;
outline: 5px dashed deeppink;
}
outline
描边的另一属性 outline-offset 还可以控制它更元素边缘之间的间距，这个属性可以接受负值。
div{
height: 200px;
width: 200px;
border: 20px solid #655;
border-radius: 10px;
outline: 5px dashed deeppink;
outline-offset: -25px;
}
outline-offset
但是，IE8 以下的并不支持 outline-offset 属性。
去掉 input 标签 focus 时的亮色边框 input {outline:none}
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。
#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 来实现边框内圆角的效果。
#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）平均下去。
如此，便可以做出一个简单的多重颜色线条的背景来:
#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 来调整其大小。
div{
width:200px;
height: 200px;
background:linear-gradient(
#fb3 50%,
#58a 0
);
background-clip:padding-box;
background-size: 20px 100%;
}
垂直条纹
div{
width:200px;
height: 200px;
background:linear-gradient(
to right,/*or 90deg*/
#fb3 50%,
#58a 0
);
background-clip:padding-box;
background-size: 100% 20px;
}
0x05 斜向条纹
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-gradient 和 repeating-radial-gradient，循环式的重复渐变。
如此，便再也无须担心如何去创建无缝拼接的贴片。并且，我们会直接在渐变的色标中指定长度，而不是原来的 bakcground-size ，这里的长度是直接在渐变轴上进行度量的，它直接代表了条纹自身的宽度，对渐变来说就是以整个元素的范围进行填充。
div{
width:200px;
height: 200px;
background:repeating-linear-gradient(
45deg,
#fb3 0,
#fb2 15px,
#58a 0,
#58a 30px
);
}
需注意的是在这个方法中，如果我们想要创建双色条纹，那么便需要使用四个色标才行。
0x06 同色系条纹
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
);
}
我们首先为其指定了一个主色系的背景颜色，然后把半透明白色的条纹叠加在主色系背景之上得到浅色条纹。
桌布图(方格图)
div{
width:200px;
height: 200px;
background: white;
background-image:
linear-gradient( rgba(200,0,0,0.5) 50%,transparent 0),
linear-gradient(90deg,rgba(200,0,0,0.5) 50%,transparent 0);
background-size: 30px 30px;
}
0x07 伪随机条纹
自然界中的事物都不是以无限平铺的方式存在的。大自然更不会以 "无缝" 的贴片重复自己。所以重现大自然的随机性也许展现更多的真实性。
background: hsl(20,40%,90%);
background-image:
linear-gradient( 90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,81px 100%;
//41,61,81 都是质素
为了增加随机性的真实性，我们将贴片尺寸进行了最大化。为了让最小公倍数最大化，即要达成相对质素，那么最好的方法便是使用质数。
网友评论