线性渐变
颜色沿着一条直线过渡
linear-gradient ( position, color1, color2,…)
position:渐变方向,color1:第一种颜色,color2:第二种颜色,...
注意:不给方向,默认是从上到下顺序。
background:linear-gradient(to top left,red,green)
注意:从哪里来,是和 to top left相反的顺序 top的反向就对应bottom,left的反向就对应right。
即从右下角到左上角,从红色渐变成绿色。
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合。
background: radial-gradient(red,green,blue);
颜色结点均匀分布的径向渐变。
background: radial-gradient(red 20%,green 5%,blue 60%);
颜色结点不均匀分布的径向渐变,根据你设置的值决定。
background: radial-gradient(circle,red,green,blue);
形状为圆形的径向渐变,circle设置是圆形,就算div不是正方形 渐变的效果也是一个圆 。
文本添加阴影
text-shadow:h-shadow v-shadow blur color;
h-shadow:必需,水平阴影的位置,允许负值。
v-shadow: 必需,垂直阴影的位置,允许负值。
blur:可选,模糊距离 ,如果设置的是0 那么将和正常的文字清晰度一样。
color:可选,阴影的颜色。
超出部分显示省略号
overflow: hidden; (溢出隐藏)
white-space:nowrap;(文本不会换行,在同一行继续)
text-overflow: ellipsis; (用省略号来代表被修剪的文本)