CSS揭秘（二）背景与边框

Chapter2 背景与边框

1. 半透明边框

基础：了解 RGBA & HSLA 颜色（色调 0~360、饱和度、亮度（0%黑色~100%白色）、透明度）

默认情况下，背景在边框的下层，容器的背景从半透明的边框透上来并覆盖了底层背景，如下图：

CSS揭秘（二）背景与边框（图片均来自于本书所带网站：http://play.csssecrets.io ，感谢作者的付出）

border: 10px solid hsla(0,0%,100%,0.5);
background: white;
--------------------------------------------------
background-clip: padding-box; //用内边距的外沿裁剪背景

CSS揭秘（二）背景与边框

2. 多重边框

基础：了解 box-shadow 的基本用法，常用于生成投影，可以接受四个参数，两个偏移量，一个模糊值，一个扩张半径，它的好处在于支持逗号分隔语法，可以创建任意数量的投影

要注意的是扩张半径的设置：

background: pink;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px #357, //第二层的外框宽度实际是5px
            0 0 0 25px #384, //第三层宽度实际为10px

如果只需要两层边框，可以用 outline（描边来实现），它的优点在于边框样式十分灵活。

background： pink;
border: 10px solid #655;
outline: 5px solid deeppink; //虚线用dotted

3. 背景定位

以前的定位方式使得图片与容器之间没有空隙，提供三种解决方案

background-position:right bottom;           //默认情况下该属性是以padding box为准的
------------------------------------------------------------------------------------
padding:10px
background:url(xxx.svg) no-reapt #334
background-position:right 20px bottom 10px;   //该属性现已扩张，允许我们在关键字前指定偏移量（1）
------------------------------------------------------------------------------------
background-orgin:content-box;                              //更改后以内容区的边缘作为基准 （2）
------------------------------------------------------------------------------------
background-position：calc(100%-20px) calc(100%-10px);  //calc()函数，以左上角偏移的思路考虑（3）

4.条纹背景

规则：A颜色纯色从色带的0开始到20%结束，B颜色从色带80%开始为纯色

background:linear-gradient(#fb3,#58a);
background:linear-gradient(#fb3 20%, #58a 80%); //20%为实色，从顶部开始计算百分比

background-size:100% 30px;//背景默认重复平铺，形成条纹

多色条纹：当第二个色标的位置值为0时，它的位置就会被浏览器调整为前一个色标的位置

同色系条纹：

background: repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px);  //修改较繁琐
------------------------------------------------------------------------------------------
background:#58a;repeating-linear-gradient(30deg,
                hsla(0,0%,100%,0.1),
                hsla(0,0%,100%,0.1) 15px,
                transparent 0,  //表示透明
                transparent 30px);

CSS揭秘（二）背景与边框

最后附上样式库：http://lea.verou.me/css3patterns/

秒客网

CSS揭秘（二）背景与边框

相关文章