1. attr()
用来选择元素的属性值,用法:attr(html元素的属性名),正常搭配css content一起使用
html:
<p><a href="http://a.b.c" name="attr">十</a></p>
<p><a href="http://d.f.e" name="我是谁">九</a></p>
css:
a:after{content:'('attr(href) '/' attr(name) ')'}
结果:
十(http://a.b.c / attr)
九(http://d.f.e / 我是谁)
2. calc()
用于动态计算长度值 calc(数学表达式)
- 运算符前后需要有空格
- 不管什么长度都可以用calc计算
- calc() 支持 '+','-','*','/' 等运算
- calc() 使用标准的数学运算优先级规则
语法:
width: calc(70% - 60px)
height: calc(70% / 2 * 12 + 66px)
3. linear-gradient()
用于 创建一个线性渐变的 图像,需要设置一个起点一个方向,还可以定义角度起始颜色等。
语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: 指定渐变方向的角度 (可以省略)
color-stop1: 指定渐变的起止颜色
示例:
background: linear-gradient(red,yellow,blue,green);
// 结果如下,在未设置渐变角度是自上而下的
示例:
background: linear-gradient(12deg,red,yellow,blue,green);
// 结果如下,设置渐变角度后
示例:
background: linear-gradient(to left top,red,yellow,blue,green);
// 结果如下,渐变角度可以从某个方向到另外一个方向
4. radial-gradient()
用法和linear-gradient()差不多,只不过它是用径向渐变创建图像,渐变由中心点定义,必须设置两个终止色(区别)
语法:
background: radial-gradient(shape size at position, start-color, ..., last-color);
shape: 确定圆的类型(选填)
- ellispe(默认): 指定椭圆形的径向渐变
- circle: 指定圆形的径向渐变
size: 指定径向渐变的大小(选填)
- farthest-corner(默认): 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边
position: 定义渐变的位置(选填)
- center(默认):设置中间为径向渐变圆心的纵坐标值
- top:设置顶部为径向渐变圆心的纵坐标值
- bottom:设置底部为径向渐变圆心的纵坐标值
start-color, ..., last-color:定义渐变的起止色
示例:
background: radial-gradient(red, green, blue, yellow);
// 结果如下,渐变从中心往外扩散
示例:
background: radial-gradient( red 5%, green 10%, blue 15%,yellow 20%);
// 结果如下,可以单独设置每个颜色的占比
示例:
background: radial-gradient(circle, red, green, blue, yellow);
// 结果如下,径向渐变设置为圆形,默认为椭圆形
5. repeating-linear-gradient()
创建重复的线性渐变图像
语法:
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
angle: 定义渐变角度(0deg-360deg,默认180deg)
side-or-corner: 指定线性渐变起始位置(顺序随意)
- 关键字一: 水平位置(left,right)
- 关键字而: 垂直位置(top,bottom)
color-stop1, color-stop2,...
- 指定渐变的起止颜色,由颜色值、停止位置(可选,使用百分比指定)组成
示例:
background: repeating-linear-gradient(red, yellow 10%, green 20%);
// 结果如下,默认自上而下,以及设置颜色的占比
示例:
background:repeating-linear-gradient(30deg, red 5%, yellow 10%, green 20%)
// 结果如下,设置角度后的效果