CSS背景与边框

---

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-offset 还可以控制它更元素边缘之间的间距，这个属性可以接受负值。

div{
            height: 200px;
            width: 200px;
            border: 20px solid #655;
            border-radius: 10px;
            outline:  5px dashed deeppink;            
            outline-offset: -25px;
        }

但是，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 都是质素

为了增加随机性的真实性，我们将贴片尺寸进行了最大化。为了让最小公倍数最大化，即要达成相对质素，那么最好的方法便是使用质数。