CSS Webkit Linear Gradient指CSS样式中，用于设置网页元素背景的一种线性渐变的代码方法。在网页设计中，常常会用到渐变来实现某些特殊的效果，Webkit Linear Gradient则是一种简单实用的方法。
一、基本使用方式
Webkit Linear Gradient的基本代码如下：
background: -webkit-linear-gradient(direction, color-stop1, color-stop2, ...);
其中direction表示渐变的方向，可以是关键词top、left、right、bottom，也可以是一定角度的数值，例如45deg表示从左下到右上。color-stop表示渐变的颜色点，可以有多个，每个颜色点由一个颜色值和对应的位置构成。
例如，我们使用下面的代码设置一个从左上角到右下角的渐变颜色：
background: -webkit-linear-gradient(left top, #FFAFBD, #ffc3a0);
效果如下图：
二、多个颜色点与颜色模式
在Webkit Linear Gradient中，可以通过添加多个颜色点，来实现更加复杂的渐变效果。
例如，我们使用下面的代码设置一个从左边到右边渐变，并垂直划分为三段颜色的效果：
background: -webkit-linear-gradient(left, #FFAFBD 0%, #ffc3a0 40%, #FFAFBD 70%, #ffc3a0 100%);
效果如下图：
在多个颜色点中，我们可以加入颜色的模式（color-stop），控制颜色渐变的方式。
例如，我们使用下面的代码设置一个从左到右色彩分明、边缘清晰的线性渐变：
background: -webkit-linear-gradient(left, #00bcd4 0%, #00bcd4 25%, #49c1a2 25%, #49c1a2 50%, #F5B041 50%, #F5B041 75%, #E74C3C 75%, #E74C3C 100%);
效果如下图：
三、径向渐变
Webkit Linear Gradient不仅可以实现线性的渐变效果，还可以实现径向的渐变效果。
使用下面的代码，我们可以实现一个由内而外逐渐变暗的渐变效果：
background: -webkit-radial-gradient(50% 50%,ellipse cover, #FFAFBD, #ffc3a0);
效果如下图：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/206074.html
微信扫一扫 
支付宝扫一扫 