CSS3之渐变属性

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

---

---

CSS3 中的渐变

此前，渐变效果必须使用图像来显示部分效果，但是现在可以使用css渐变实现，减少下载的事件和宽带的使用
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡(至少是两个颜色)
CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向…
• 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变

background-image:linear-gradient(direction, color-stop1, color-stop2, ...);

direction 默认为to bottom，即从上向下的渐变
可以设置的有

•   to bottom	从上向下
  

•   to left		从左向右
  

•   to right	从右向左
  

•   to top		从下向上
  

•   to right bottom		向右下角
  

•   to right top		向右上角
  

•   to left bottom		向左下角
  

•   to left top			向左上角
  

• 也可以直接使用角度 45deg, 70deg, …

stop 颜色的分布位置，默认均匀分布

径向渐变

background-image:radial-gradient([shape size at position,] start-color, ..., last-color);

• shape：渐变的形状，默认为ellipse表示椭圆形，circle表示圆形
  如果元素形状为正方形的元素，则ellipse和circle显示一样
• size：渐变的大小，即渐变到哪里停止，
• farthest-corner：最远角 默认值
• closest-corner：最近角
• farthest-side：最远边
• closest-side：最近边
• position: 设置中心点的位置

重复线性渐变

background:repeating-linear-gradient(direction,color-stop1 ___%, color-stop2 ___%, ...)

重复径向渐变

background:repeating-radial-gradient(red, yellow 10%, green 15%)

制作彩虹

	赤色RGB(255,0,0)
	橙色RGB(255,165,0)
	黄色RGB(255,255,0)
	绿色RGB(0,255,0)
	青色RGB(0,127,255)
	蓝色RGB(0,0,255)
	紫色RGB(139,0,255)

CSS3 中的角度

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog