码迷,mamicode.com
首页 > Web开发 > 详细

css渐变

时间:2018-06-25 12:47:54      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:begin   之间   --   direct   角度   let   col   class   mil   

 

css渐变
渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡(过渡是指颜色的过度)
兼容性
IE chrome FireFox Safari Opera
10+ 26+ 16+ 6.1+ 12.1+
10.0-webkit- 3.6 -moz- 5.1 -webkit- 11.6 -0-
线性渐变(Linear Gradients)属性
是沿一根轴线改变颜色,从起点到终点颜色进行顺序渐变(从一边拉向另一边)
语法:background:linear-gradient(direction,color-stop1,color-stop2,...);
线性渐变-从上到下(默认)--不需要指定方向
语法:background:linear-gradient(color-stop1,color-stop2,...);
线性渐变-从做到右
background: -webkit-linear-gradient( begin-direction,red,blue,greenyellow);
background: -moz-linear-gradient( end-direction,red,blue,greenyellow);
background: -o-linear-gradient( end-direction,red,blue,greenyellow);
background: linear-gradient(to end-direction,red,blue,greenyellow);(标准写法)
注:随着浏览器版本不断更新,兼容性也会有所变化,并会越来越好,
如:-moz-linear-gradient在火狐3.6-15版本中,方向指目标防线,新版指开始方向,
并兼容了渐变的标准写法,所以建议用标准写法
线性渐变-对角
background: -webkit-linear-gradient(begin-level begin-vertical,red,blue,greenyellow);
background: -moz-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: -o-linear-gradient( end-level end-vertical,red,blue,greenyellow);
background: linear-gradient( to end-level end-vertical,red,blue,greenyellow);(标准写法)
线性渐变-使用角度
语法:background:linear-gradient(angle,color-stop1,color-stop2,...);
角度说明 0deg 从下到上的渐变 90deg从做到右
线性渐变-颜色结点
background:linear-gradient(color1 length|percentage,
color2 length|percentage,
......
);
/*10%是纯红色,从10%到15%从红色渐变成橘色,最后一个如果是90%,那么从90%到100%之间就是纯粹的violet色,
因为indigo 80%violet需要大于80%才会有渐变效果*/
/*注:最后一个颜色如果不写默认是100%,第一个颜色如果不写默认是0%*/
background: -webkit-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -moz-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: -o-linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
background: linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 50%,blue 70%,indigo 80%,violet 100%);
透明渐变
/*rgba第四个值是阿尔法值,如果是0,代表透明度为0,如果是1,透明度100%*/
/*第二个rgba代表位置到50%,透明度达到90%*/
background: -webkit-linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,.9),rgba(255,0,0,1));

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变-从上到下(默认情况)</title>
    <style type="text/css">
        div{
            width: 500px;
            height: 300px;
            /*从上到下*/
            /*background: -webkit-linear-gradient(red,blue,greenyellow);*/
            /*background:    -moz-linear-gradient(red,blue,greenyellow);*/
            /*background:      -o-linear-gradient(red,blue,greenyellow);*/
            /*background:         linear-gradient(red,blue,greenyellow);*/
            /*从左到右*/
            /*background: -webkit-linear-gradient(    left,red,blue,greenyellow);*/
            /*background:    -moz-linear-gradient(   right,red,blue,greenyellow);*/
            /*background:      -o-linear-gradient(   right,red,blue,greenyellow);*/
            /*background:         linear-gradient(to right,red,blue,greenyellow);*/
            /*对角线*/
            background: -webkit-linear-gradient(       left top,red,blue,greenyellow);
            background:    -moz-linear-gradient(   right bottom,red,blue,greenyellow);
            background:      -o-linear-gradient(   right bottom,red,blue,greenyellow);
            background:         linear-gradient(to right bottom,red,blue,greenyellow);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

 

css渐变

标签:begin   之间   --   direct   角度   let   col   class   mil   

原文地址:https://www.cnblogs.com/alasijia/p/9223492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!