为了账号安全,请及时绑定邮箱和手机立即绑定

学会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);;
}

效果如下:
Image 11.png

实例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以及类似的使用 数据类型的属性中。

感谢您的阅读,创作不易,动动你的小手指,给我点个赞吧,顺便给个关注哦!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
PHP开发工程师
手记
粉丝
1
获赞与收藏
0

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消