当前位置： 移动技术网 > IT编程>网页制作>CSS > css背景色渐变之线性渐变和径向渐变的具体用法

css背景色渐变之线性渐变和径向渐变的具体用法

2020年07月17日  | 移动技术网IT编程  | 我要评论

渐变？：背景色在多个颜色之间平稳过渡

线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化

线性渐变如图所示：

标准模式的语法（不添加浏览器前缀）：

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

说明：direction默认值是to bottom，即从上往下

stop:颜色的分布位置，默认均匀分布（平均分布）

兼容模式的语法（添加浏览器前缀）：

background:-webkit-linear-gradient(direction,color-stop1,color-stop2)

说明：direction值不能加to，该值表示颜色从该方向开始渐变，与上面相反

stop:颜色的分布位置，默认均匀分布（平均分布）

渐变方向：前面实现了上下或左右渐变，接下来介绍对角线型渐变

1、to left \ to right \ to top（上下或左右渐变）

2、to left top \ to right bottom(对角线渐变)

3、渐变线角度的变化

例如：标准模式 ： 40deg 40度

兼容模式 ： 90 - 40deg

线性渐变：颜色的分布(颜色区域大小)：

linear-gradient(方向, 颜色1 20%，颜色2 30%，颜色3 )

到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变

代码如下所示：　　

　　div{

            width:500px;

            height:300px;

            margin:100px auto;

            background-image: -webkit-linear-gradient(left, red, yellow);

        }

 

径向渐变：从一个点到四周的颜色的过渡变化。

径向渐变如图所示：

语法：（必须加浏览器前缀）

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size:关于径向渐变的大小：

closest-side 最近边

farthest-side 最远边

closest-corner 最近角

farthest-corner 最远角

 实现代码如下：

　　div{

            width:500px;

            height:300px;

            margin:40px auto;

            background:-webkit-radial-gradient(center,closest-corner,red,yellow,green);

        }

 

 如果感觉对自己有帮助，麻烦点一下关注，会一直盒大家分享知识的，谢谢！！！

本文地址：https://blog.csdn.net/piaoyi1997/article/details/107367357

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网