Eighteen Blog

条纹背景

背景知识: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线性渐变小结

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

多重边框

背景知识:box-shadow的基本用法,outline基本用法

1
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
1
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

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

Css

半透明边框

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

Css