css3渐变、倒影、过渡 20160526

最新推荐文章于 2023-09-11 22:39:46 发布

陈奕然

最新推荐文章于 2023-09-11 22:39:46 发布

阅读量486

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/xiasheng30/article/details/51509961

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

渐变gradient

渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

linear-gradient:线性渐变向下/向上/向左/向右/对角方向
radial-gradient:径向渐变由它们的中心定义
语法：
background:-webkit-linear/radial-gradient(起始位置(top|bottom|left top),颜色渐变到的位置百分比,颜色2 渐变到的位置百分比,…..)

<html>
    <head>
        <title></title>
        <style type="text/css">
            div{
                height: 200px;
                background: -webkit-linear-gradient(left, red 10%,green 30%,blue);
            }
        </style>
    </head>
    <body>
        <div class="">

        </div>
    </body>
</html>

CSS3 径向渐变

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法:
background:-webkit-radial-gradient(center, shape,size, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side/farthest-side/closest-corner/farthest-corner

<html>
    <head>
        <title></title>
        <style type="text/css">
            div{
                height: 200px;
                background: -webkit-radial-gradient(center,farthest-corner,red 10%,blue 95%);
            }
        </style>
    </head>
    <body>
        <div class="">

        </div>
    </body>

透明度（Transparency）

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，
定义颜色的透明度：0 表示完全透明，1 表示完全不透明。

box-reflect

语法：
box-reflect：none |
-webkit-box-reflect:
第一个值：[above,below,left,right];
第二个值：间距（像素值）百分比或者长度值
第三个值：渐变线性渐变或者径向渐变创建遮罩或者URL

<html>
    <head>
        <title></title>
        <style type="text/css">
            div{
                height: 200px;
                background: red;;
                -webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6));
            }
        </style>
    </head>
    <body>
        <div class="">

        </div>
    </body>
</html>