记一次css颜色样式渐变

2019-04-24 11:31:24  卢浮宫  版权声明:本文为站长原创文章,转载请写明出处


一、背景

    今天看到桌面上有一个关于css颜色渐变的html的demo因为要清理文件,这里记录下。


二、具体如下


<body>
<style>
div{ margin-top:20px;}
.div1{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient( #0CF , blue ,red); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient( #0CF, blue ,red); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient( #0CF, blue ,red); /* Firefox 3.6 - 15 */
background: linear-gradient (#0CF, blue ,red);
}
.div2{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient( red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient( red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
background: linear-gradient red, orange, yellow, green, blue, indigo, violet);
}
.div3{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient( #0CF 20%, blue 90% ,red 85%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient( #0CF, blue ,red #0CF 20%, blue 90% ,red 85%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient( #0CF, blue ,red #0CF 20%, blue 90% ,red 85%); /* Firefox 3.6 - 15 */
background: linear-gradient (#0CF, blue ,red #0CF 20%, blue 90% ,red 85%);
}
</style>

<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

</body>


三、页面效果如下:

    



更多精彩请关注guangmuhua.com


最新评论:

测试信息
2019-04-24 11:56:15
1楼