css如何实现颜色渐变?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
在一些项目中,可以发现大多数渐变几乎都是一样的。所有这些都是一种颜色逐渐变暗或变浅,所以制作每种颜色的新渐变感觉太麻烦也太冗余。相反,我们可以制作一个渐变来用于所有“渐”变。
那么它是如何实现的,下面我们就来具体的看看。
我在HTML中创建了常用按钮,并为它们提供了常用的类名和特定的类名以及一些样式来装饰按钮。
HTML
& lt;一个类=鞍磁utton1"在按钮1 & lt;/a>
& lt;一个类=鞍磁utton2"祝辞按钮2 & lt;/a>
& lt;一个类=鞍磁utton3"祝辞按钮3 & lt;/a>
& lt;一个类=鞍磁utton4"祝辞按钮4 & lt;/a>
& lt;一个类=鞍磁utton5"祝辞按钮5 & lt;/a> CSS
.button {
浮:左;
高度:40像素;
行高:40像素;
margin-right: 20 px;
填充:15 0 px;
颜色:# fff;
粗细:大胆的;
字体大小:16 px;
字体类型:arial;
background - color: # 555;
border - radius: 5 px;边界:固体1 px rgba (0, 0, 0, 0.5);
} 给每个按钮独特的颜色(常规背景颜色)。
CSS
.button1{背景颜色:橙色;}
.button2{背景颜色:红色;}
.button3 {background:绿色;}
.button4{背景颜色:宝蓝色;}
.button5{背景颜色:橘红色;} 现在,使所有这些渐变是很容易的。我没有使用全彩色进行渐变,如红色和深红色,而是使用背景色为黑色的渐变,不透明度为0%直到黑色背景色的不透明度为65% .
然后将此渐变添加到常用按钮类的透明度中。
CSS
.button {
背景图片:线性渐变(rgba (0, 0, 0, 0) 0%, rgba (0, 0, 0, 0.65) 100%);
} 好了,现在我们已经完成使用CSS中只有一个渐变来制作多个渐变色。
完整代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title> & lt;/title>
& lt;风格类型=拔谋?css"比;
.button {
浮:左;
高度:40像素;
行高:40像素;
margin-right: 20 px;
填充:15 0 px;
颜色:# fff;
粗细:大胆的;
字体大小:16 px;
字体类型:arial;
background - color: # 555;
border - radius: 5 px;
边界:固体1 px rgba (0, 0, 0, 0.5);
背景图片:线性渐变(rgba (0, 0, 0, 0) 0%, rgba (0, 0, 0, 0.65) 100%);/* W3C */}
.button1{背景颜色:橙色;}
.button2{背景颜色:红色;}
.button3 {background:绿色;}
.button4{背景颜色:宝蓝色;}
.button5{背景颜色:橘红色;}
& lt;/style>
& lt;/head>
& lt; body>
& lt;一个类=鞍磁utton1"祝辞按钮1 & lt;/a>
& lt;一个类=鞍磁utton2"祝辞按钮2 & lt;/a>
& lt;一个类=鞍磁utton3"祝辞按钮3 & lt;/a>
& lt;一个类=鞍磁utton4"祝辞按钮4 & lt;/a>
& lt;一个类=鞍磁utton5"祝辞按钮5 & lt;/a>
& lt;/body>
& lt;/html> 效果如下:
如果你想要悬停样式,只需将渐变颜色反转,代码如下所示:
.button:{徘徊
背景图片:线性渐变(rgba (0, 0, 0, 0.65) 0%, rgba (0, 0, 0, 0) 100%);/* W3C */} 效果如下:
感谢各位的阅读!看完上述内容,你们对css如何实现颜色渐变大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
