学会css3渐变属性,你这样这篇文章
2022/12/2 4:24:56
本文主要是介绍学会css3渐变属性,你这样这篇文章,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
CSS3颜色 渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
这一小节我们来说一下线性渐变:
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型,是一种特别的数据类型。
- 渐变轴为45度,从蓝色渐变到红色 linear-gradient(45deg, blue, red);
- 从右下到左上、从蓝色渐变到红色 linear-gradient(to left top, blue, red);
- 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red);
实例1:
background: linear-gradient(#e66465, #9198e5);
效果如下:
实例2:
p { width: 400px; height: 150px; line-height: 150px; text-align:center; color: #000; font-size:24px; background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);; }
效果如下:
实例3:
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
结果如下:
实例4:
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
如同其他gradient函数一般,linear-gradient() 函数没有内在尺寸;即,它不具备固有的或首选的尺寸,也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。
注意:
- 利用repeating-linear-gradient函数可以实现线形重复渐变效果。
- 由于数据类型系的子数据类型,只能被用于可以使用的地方。因此,linear-gradient() 并不适用于background-color以及类似的使用 数据类型的属性中。
感谢您的阅读,创作不易,动动你的小手指,给我点个赞吧,顺便给个关注哦!
这篇关于学会css3渐变属性,你这样这篇文章的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享