如何用css写渐变色。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用css写渐变色。相关的知识，希望对你有一定的参考价值。
/*上下线性渐变（兼容IE10及以上）*/background:-webkit-linear-gradient(#fff,#000);/*兼容webkit内核，比如Chrome*/
background:-moz-linear-gradient(#fff,#000);/*兼容老火狐浏览器*/
background:-o-linear-gradient(#fff,#000);/*兼容老欧朋Opera浏览器*/
background:linear-gradient(#fff,#000);/*适用于所有新版本浏览器*/
/*左右线性渐变（兼容IE10及以上，第一个值是left或right）*/
background:-webkit-linear-gradient(left,#fff,#000);/*兼容webkit内核，比如Chrome*/
background:-moz-linear-gradient(left,#fff,#000);/*兼容老火狐浏览器*/
background:-o-linear-gradient(left,#fff,#000);/*兼容老欧朋Opera浏览器*/
background:linear-gradient(left,#fff,#000);/*适用于所有新版本浏览器*/
/*兼容IE6-9渐变（只适用于线性渐变，参数enabled:true表示激活滤镜，false表示不激活；gradientType:0表示上下渐变，1表示左右渐变；startColorStr：起始渐变值，可以是#ffffff形式也可以是#ffffffff形式，此形式前两位表示透明度；endColorStr：结束渐变值，可以是#000000形式也可以是#ff000000形式，此形式前两位表示透明度。）*/
filter:progid:DXImageTransform.Microsoft.Gradient(enabled='true',gradientType=0,startColorStr='#ffffff',endColorStr='#000000');
/*径向渐变（兼容IE10及以上）*/
background:-webkit-radial-gradient(#f00,#0f0,#00f);/*兼容webkit内核，比如Chrome*/
background:-moz-radial-gradient(#f00,#0f0,#00f);/*兼容老火狐浏览器*/
background:-o-radial-gradient(#f00,#0f0,#00f);/*兼容老欧朋Opera浏览器*/
background:radial-gradient(#f00,#0f0,#00f);/*适用于所有新版本浏览器*/ 参考技术A background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction 表示开始方向；
color-stop1 表示开始颜色；
color-stop2， ... 依次添加颜色
这是css3里的 存在兼容性问题 参考技术B 这个的话写起来比较麻烦、我自己以前写过、我可以给你个网址、很具体、希望能帮到你、http://www.cnwenhui.cn/html/1467185296153.html本回答被提问者采纳 参考技术C css3可以实现，
CSS如何用css做一个爱心
摘要：HTML的标签都比较简单，入门非常的迅速，但是CSS是一个需要我们深度挖掘的东西，里面的很多样式属性掌握几个常用的便可以实现很好看的效果，下面我便教大家如何用CSS做一个爱心。
前期预备知识：
- 明白正方形的画法。
- 明白圆形的画法。
- 明白什么是定位。
- 明白怎么旋转。
话不多说，先教大家怎么用css画一个圆形。
.disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300px 0px 0px 300px; border-radius:100%; float:left; }
由于我们的爱心是由两个圆和一个正方形组成的，所以我们还需要再来一个圆形。
.disc2{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:250px 0px 0px 0px; border-radius:100%; float:left; position: relative; right: 50px; }
第三步我们就需要做一个正方形了。
.square{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin: 300px 0px 0px 0px; float: left; position: relative; right: 152px; }
做完这些的效果已经基本上出来了，但是我们还需要调整一下爱心的角度，这时就需要用到我们css样式中的transform中的rotate属性了。
我们由于需要把三个div都旋转角度，所以我们把这三个div放在一个div里面。具体代码如下：
.main{ transform: rotate(45deg); margin: 300px; }
做到现在，我们的爱心就已经做出来咯。效果图如下：
全部代码如下（包含HTML代码和CSS代码）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link href="css/square.css" rel="stylesheet" type="text/css"> 6 <title></title> 7 </head> 8 <body> 9 <div class="main"> 10 <div class="disc1"></div> 11 <div class="disc2"></div> 12 <div class="square"></div> 13 </div> 14 </body> 15 </html>
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 .main{ 6 transform: rotate(45deg); 7 margin: 300px; 8 } 9 .disc1{ 10 width: 100px; 11 height: 100px; 12 border:1px solid red; 13 background-color: red; 14 margin:300px 0px 0px 300px; 15 border-radius:100%; 16 float:left; 17 } 18 .disc2{ 19 width: 100px; 20 height: 100px; 21 border:1px solid red; 22 background-color: red; 23 margin:250px 0px 0px 0px; 24 border-radius:100%; 25 float:left; 26 position: relative; 27 right: 50px; 28 } 29 .square{ 30 width: 100px; 31 height: 100px; 32 border:1px solid red; 33 background-color: red; 34 margin: 300px 0px 0px 0px; 35 float: left; 36 position: relative; 37 right: 152px; 38 }
欢迎大家在评论区留言。
以上是关于如何用css写渐变色。的主要内容，如果未能解决你的问题，请参考以下文章