首页手记 CSS的秘密——背景和边框（中）

CSS的秘密——背景和边框（中）

标签：

Html/CSS Html5 CSS3

1.5 条纹背景

形形色色的条纹元素在网页上的运用广泛，至少和一些从杂志到壁纸的视觉设计一样无处不在，然而，在工作中我们完成条纹背景并不理想。通常，通常我们会制作一个展开的位图，我们每次需要做一些改变时都需要再次编辑图片。有些可能用SVG（可缩放矢量图形）代替，但始终是一个独立的文件，并且语法并不是很友好。
秉承DRY（Don't repeat yourself）的精神，我们可以直接用CSS制作条纹。
（1）水平条纹

/* 基本的线性渐变条纹，从#fb3渐变到#58a */
background: linear-gradient(#fb3, #58a);
/* 可以用background-size设置条纹的大小，前一个值代表宽度，后一个值代表高度*/
background-size: 100% 30px;
/* 由于背景默认平铺，故以上条纹会铺满整个浏览器；可根据需要设置不平铺 */
background-repeat: no-repeat;

/* 顶部20%是实在的#fb3，底部20%是实在的#58a,渐变部分占据了整体高度的60% */
background: linear-gradient(#fb3 20%, #58a 80%);
background-size: 100% 30px;

/* 如果两种颜色都设置为50%，则上半部分是实在的#fb3，下半部分是实在的#58a，没有渐变部分 */
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

/* 只要两种颜色的比例值一样，就不存在渐变部分，可按前者的比例为准，设置两色不同粗细条纹；
例如，将#fb3设置为30%，则顶部30%是实在的#fb3，只要#58a的比例不大于#30%（不一定等于30%），剩下的都是实在的#58a */
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;

/* 从上面的分析发现，如果是不要渐变部分，第二个颜色的比例值似乎并不怎么重要，我们可以采取更加DRY的方式，直接设置为0，达成相同的效果 */
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

/* 实际上还可以很方便地设置两种颜色以上的条纹 */
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

（2）垂直条纹

/* 垂直条纹的设置几乎与水平条纹的设置一样，只是多了一个设置方向的属性，默认值是to bottom，正是水平条纹需要的 */
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

（3）斜纹

/* 我们可能会尝试，如果把方向设置为45度角，结果会不会得到对角线条纹，结果是否定的；
这样做得到的是看起来由一个个边长30px，对角颜色不同的正方形拼接成的背景图，并没有将其作为一个整体旋转45度角*/
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;

/* 在一个整体的对角线条纹背景图上截取一个正方形，会发现实际上里面包含四个无缝连接的条纹，不止两个*/
background: linear-gradient(45deg,
            #fb3 25%, #58a 0,
            #58a 50%, #fb3 0,
            #fb3 75%, #58a 0);
/* 如果宽高依旧设置为30px，根据勾股定理，实际上条纹的宽度会小于15px；
如果想要宽度看起来约等于15px，可设置background-size: 42.4px 42.4px（省略具体数学计算） */
background-size: 30px 30px;

（4）更好的斜纹
上面设置斜纹的方式弹性不够好，如果我们需要的不是45度，而是其他角度，仅仅改变角度是得不到想要的效果的；少有人知道linear-gradient还有平铺版repeating-linear-gradient，实现方式一样，只是颜色会平铺，直至铺满整个图片。
使用repeating-linear-gradient的好处有：1）减少重复：我们改变任何一种颜色只需要改两处，而不是三处。2）可以方便修改不同角度，无需考虑条纹的无缝连接。

/* 有渐变部分的45度斜角条纹 */
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
/* 注意不再是用background-size */
height：100%;

/* 无渐变部分的45度斜角条纹 */
background: repeating-linear-gradient(45deg,
            #fb3, #fb3 15px, #58a 0, #58a 30px);
height:100%;

（5）灵活的细微条纹
很多情况下，我们的条纹不是完全不同的颜色，而是有着细微的差别的相近颜色。然而，这种联系不是特别容易通过RGB颜色看出来；更进一步地，如果我们想改变基色，我们需要修改四处地方。

/* #79b和#58a是相近颜色 */
background: repeating-linear-gradient(30deg,
            #79b, #79b 15px, #58a 0, #58a 30px);
height:100%;

/* 更好的实现方式 */
background: #58a;
background-image: repeating-linear-gradient(30deg,
              hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
              transparent 0, transparent 30px);
/* 百分之百的视口高度 */
height: 100vh;

1.6 复杂的背景图案

除了上述简单的条纹图案外，CSS3还能实现如网格，波尔卡圆点，棋盘等更加复杂的图案。
点击这里CSS3 Patterns Gallery，你会惊叹CSS3的神奇！
下面只介绍一些相对简单常见的背景图案实现方式。
（1）网格

/* 利用水平，垂直条纹的结合，再加上透明度的运用，可以实现网格图案 */
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

/* 有时候我们需要调整网格大小，而线宽保持不变 */
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
                  linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

/* 大格套小格 */
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                  linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
                 10px 10px, 10px 10px;

（2）波卡尔圆点

/* 基本的圆点图案 */
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;

/* 为了美观，我们可以结合两个radial-gradient，并给予不同的位置坐标，形成错开排列的波卡尔圆点；
注意：第二个位置坐标必须是圆点大小的一半*/
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
                  radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

（3）棋盘
细微的棋盘图案可以作为一个不愠不火的纯色背景。用CSS制作棋盘图案比我们所期望的棘手一些。
具体实现的探索思路有点复杂，这里就略过了，只列出最后结果。

background: #eee;
background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,
                  transparent 75%, rgba(0,0,0,.25) 0),
                  linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0,
                  transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

/* 用CSS实现的代码有点多的时候，可以用SVG的方式 */
background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >\
            <rect x="50" width="50" height="50" />\
            <rect y="50" width="50" height="50" />\
            </svg>');
background-size: 30px 30px;

另：