CSS3中元素背景的 gradient 渐变属性

前段时间我写过一篇:CSS中background属性总结 整理了background的常用属性。

在CSS3中 background-image 还有一个 gradient 属性——渐变。

渐变大体分两种:
1、线性渐变:linear-gradient

线性渐变的用法是:linear-gradient(direction方向/角度,color1,color2......);

单向渐变:从一个水平或者垂直方向到另一个方向

background-image: linear-gradient(to right,red,blue); /*从左到右 由红到蓝渐变*/

效果如下:


单向渐变:从一个角到另一个相对的角

background-image: linear-gradient(to right top,red,blue); /*从左下角到右上角*/

效果如下:


多色渐变:可以有多个颜色的值

background-image: linear-gradient(to right top,red,orange,yellow,green,cyan,blue,purple); /*从左下到右上 颜色。。。*/

效果如下:


重复渐变:两种颜色重复渐变

background-image: repeating-linear-gradient(to left,black 30px,white 60px); /*从右向左渐变,黑色渐变30px,白色从30px开始到60px,总共占60px,重复出现,后面的值要比前面的大。*/

效果如下:


角度渐变:渐变倾斜的角度

background-image: linear-gradient(45deg,white,blue); /*角度45度 由白到蓝*/

效果如下:


2、径向渐变:radial-gradient

径向渐变:radial-gradient(shape形状,color1,color2......);

径向渐变的形状有2种:ellipse椭圆形(默认);和circle圆形;

圆形渐变:

background-image: radial-gradient(circle,white,blue); /*形状:圆形 内部颜色 外部颜色*/

效果如下:


可以设置圆心位置:

background-image: radial-gradient(circle at left bottom,white,blue); /*形状:圆形 at left bottom圆心的位置 内部颜色 外部颜色*/

效果如下:


未经允许不得转载:Web前端开发资源网 » CSS3中元素背景的 gradient 渐变属性

推荐阅读:

Intellij IDEA WebStorm/PhpStorm中文输入框无法跟随怎么办?

Ueditor后端配置项没有正常加载,上传插件不能正常使用!的解决过程。

Discuz X3.4 MySQL数据库连接问题的解决方法

JetbrainsCrack-2.7激活补丁更新 亲测激活PhpStorm2018

html CSS引用字体文件

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)