CSS背景与边框

摘要：背景与边框半透明边框背景知识颜色在里我们可以使用和两种色彩模式，二者均可以用来在设置颜色的同时指定其它透明度。解决方案需要知道的是，在默认情况下，背景会延伸到边框所在区域的下层。

title: 背景与边框
date: 2016-10-16
tags: CSS Secrets

在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;

不为人知的是，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 属性来产生外层的边框，这种方案会变得非常灵活，而不同于 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}

有时，我们希望背景图片与容器的边角之间留出一定的空隙(类似内边距的效果)，在 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 中使用的边角关键字将会以内容区的边缘作为基准。

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

#box{
  background:#655;
  padding:0.8em;
}

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

在 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;
}

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            
    );            
}

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

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;
}

自然界中的事物都不是以无限平铺的方式存在的。大自然更不会以 "无缝" 的贴片重复自己。所以重现大自然的随机性也许展现更多的真实性。

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

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