CSS3 渐变 文本效果

114 阅读1分钟
  1. 线性渐变 linear gradient

颜色沿着一条线过渡:

  • 从左到右#box1{background:linear-gradient(to right,red,blue)},
  • 从上到下#box2{background:linear-gradient(to bottom,red,blue)}
  • 从左上角到右下角#box1{background:linear-gradient(to bottom right,red,blue)} 等。
  1. 径向渐变 radial gradient

圆形或者椭圆形渐变,颜色从一个起点朝所有方向混合#box4 { background-image: radial-gradient(red, yellow, green); }

3.文本阴影 text-shadow:h-shadow,v-shadow,blur,color)

  • h-shadow 必需,水平阴影位置,允许负值。
  • v-shadow 必需,垂直阴影位置,允许负值。
  • blur 可选,模糊距离。
  • color 可选,阴影的颜色。

4.如何显示溢出内容text overflow

  • text-overflow:ellipsis 文本超出内容用省略号···表示。 image.png

  • text-overflow:clip 文本超出部分不显示。 image.png