前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3中元素背景的 gradient 渐变属性

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

作者头像
德顺
发布2019-11-13 14:51:26
1.4K0
发布2019-11-13 14:51:26
举报
文章被收录于专栏:前端资源

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

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

渐变大体分两种:

1、线性渐变:linear-gradient

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

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

代码语言:javascript
复制
background-image: linear-gradient(to right,red,blue); /*从左到右 由红到蓝渐变*/

效果如下:

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

代码语言:javascript
复制
background-image: linear-gradient(to right top,red,blue); /*从左下角到右上角*/

效果如下:

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

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

效果如下:

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

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

效果如下:

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

代码语言:javascript
复制
background-image: linear-gradient(45deg,white,blue); /*角度45度 由白到蓝*/

效果如下:

2、径向渐变:radial-gradient

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

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

圆形渐变:

代码语言:javascript
复制
background-image: radial-gradient(circle,white,blue); /*形状:圆形 内部颜色 外部颜色*/

效果如下:

可以设置圆心位置:

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

效果如下:

代码语言:txt
复制
     (adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-11-08),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档