复杂的背景图案

上一篇文章中我们学会了如何使用渐变实现条纹状的背景，但是实际上条纹背景并不是我们能实现的唯一的背景图案，利用渐变我们可以实现很多更为复杂的图案，本篇会介绍一些其他的简单而实用的背景图案。

条纹背景

背景知识：CSS线性渐变，background-size

CSS线性渐变

1
2
3
4

background: linear-gradient(red, yellow, blue);
background: linear-gradient(red 0%, yellow 50%, blue 100%);
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
background: linear-gradient(90deg, red 0%, yellow 50%, blue 100%);

1. to right代表渐变偏移角度，to right (相当于90deg)
2. red，yellow，blue代表渐变色，表示从red - yellow - blue (相当于red 0% - yellow 50% - blue 100%)。 意思是从0%距离处为red，通过0%-50%的距离渐变到yellow，再通过50%-100%的距离渐变到blue。
   1. linear-gradient(90deg, red 0%, yellow 50%, blue 0) 等价于 linear-gradient(90deg, red 0%, yellow 50%, blue 50%) 因为当你的色标位置值设置为0时，会自动调整为前一个色标位置值。
   2. linear-gradient(90deg, red 20%, yellow 50%, blue 100%); 代表从0-20%都为red色。
   3. linear-gradient(90deg, red 20%, yellow 20%, blue 100%); 代表从20%处颜色突然变化为yellow。（20%-20%之间没有渐变距离）
   4. linear-gradient(90deg, red 20%, yellow 20%, yellow 50%, blue 100%); 代表从20%-50%处都是黄色，然后从50%处开始渐变直到100%变化为blue

css线性渐变小结

3. line-gradient中相邻的两个颜色值代表，从色标A渐变到色标B。
4. 颜色后紧跟的数值，代表AB两个颜色之间的渐变区间。（差值为渐变区间的长度，若差值为0，则为突变）
5. 颜色后的数值为0时，自动取前一位的数值。

上篇文章讲述了实现条纹效果所使用的CSS特性并实现了水平和垂直条纹，接下来我们来实现斜向条纹。

边框内圆角

背景知识：box-shadow，outline，“多重边框”

灵活的背景定位

背景知识：background-position的扩展语法，background-origin，calc()

阅读全文

多重边框

背景知识：box-shadow的基本用法，outline基本用法

1

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

1

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

以上是box-shadow的基本参数。box-shadow是为元素添加阴影效果的样式。但是我们可以通过对其属性的设置，呈现边框效果。

半透明边框

背景知识：RGBA/HSLA 半透明颜色， 它们同样是一种颜色，并非只适用于背景。
background-clip 背景裁切属性，定义了背景的延伸范围，是否延伸到边框、内边距盒子、内容盒子，内容文字下面。分别对应border-box、padding-box、content-box、text四个属性值

阅读全文

Demo

直接进demo演示页面查看吧。

demo演示地址

今天涉及两个属性：

1. overscroll: scroll-y / scroll-x / scroll;
2. border-radius: 10px;

背景

我们在使用z-index的时候，有时候会发现，无论怎么样增大z-index的值，都无法改变目标元素的层级。

• 其实是这几种情况在作怪

1. position
2. float
3. opcity
   阅读全文