分享好友教程首页教程搜索频道列表

css3 的background 渐变

2019-07-03 12:5417040
+关注32
核心提示:background-image: linear-gradient(0deg, #fff 0%,#000 100%);上面是主代码,括号...
background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);

上面是主代码,括号内的0deg是角度,后面跟着一个颜色和颜色开始的位置,后面跟着另一个颜色和颜色结束的位置,可以写很多个颜色,标注好位置就好。



样式1

css3 的background 渐变


background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);

样式2

css3 的background 渐变


background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);

样式3

css3 的background 渐变


background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);

样式4

css3 的background 渐变


background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);

样式5

css3 的background 渐变


background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);

样式6

css3 的background 渐变


background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);
本文标签:#css#渐变#背景色
整理员:小黑
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

纯CSS实现多标签自动显示超出数量的思路详解

    有多个宽度不同的标签水平排列,当外层宽度不足时,会自动提示超出的数量,这篇文章主要介绍了纯 CSS 实现多标签自动显示超出数量的思路详解,需要的朋友可以参考下

小黑 CSS相关2026-07-20

使用CSS实现渐变圆角边框的效果

    这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果,有没有发现在现如今的网站应用中,我们大量的使用到这类场景,在解决这类问题时,我们利用了css的mask与mask-composite属性

小黑 CSS相关2026-07-20

css3收货地址平行四边形的线条样式示例代码

    这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

小黑 CSS相关2026-07-20

CSS实现空心尖角的示例代码

网络 CSS相关2026-07-20

CSS3用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

小黑 CSS相关2026-07-20

下一篇
我来说两句
抢沙发