CSS3渐变

作者: vinterx | 来源:发表于2019-04-10 16:11 被阅读0次

css3渐变:线性和径向
CSS3渐变的使用方法:
CSS 渐变
CSS3之渐变
css3背景和border渐变色写法，和使用border-ima
CSS3 渐变（Gradients）
渐变
Css渐变gradients深入理解
css3 线性渐变文字光影
css3渐变属性有哪些？CSS3渐变属性用法

css3的渐变还是比较强大的，制作一些常规背景图，如棋盘，房屋地板非常漂亮的，直接上图。

地板.png

竹子.png

桌布.png

星盘.png

div{
            margin: 0 auto;
            width: 600px;
            height: 600px;
            /*
                1.0或者0%起到截断的作用
                2.颜色重叠的核心：第一个渐变需要留出部分（transparent）空白给第二个渐变使用，否则第二个渐变不会有任何的颜色，该案例中transparent 0%, transparent 75%, 其实就是留给第二个渐变使用的。
                3.使用角度旋转就可以得到想要的效果
            */

/*          background-image: linear-gradient(90deg, red 0%, red 50%, transparent 0%, transparent 100%),
                                linear-gradient(180deg, white 50%, black 100%);
                                background-size: 25px 25px;*/

            /*样式调整，做棋盘形状*/
/*          background-image: linear-gradient(90deg, #000 0%, #000 25%, transparent 0%, transparent 75%, #000 0%, #000 100%),
                                linear-gradient(180deg, #000 0%, #000 25%, transparent 0%, transparent 75%, #000 0%, #000 100%);
                                background-size: 25px 25px;*/
            /*缩写并变换角度*/
/*          background-image: linear-gradient(135deg, #000 25%, transparent 0%, transparent 75%, #000 0%),
                                linear-gradient(225deg, #000 25%, transparent 0%, transparent 75%, #000 0%);
                                background-size: 25px 25px;*/

            /*拓展--地板*/
            background-image: linear-gradient(135deg, gray 0%, #000 25%, transparent 0%, transparent 75%, #000 0%, gray 100%),
                                linear-gradient(225deg, gray 0%, #000 25%, transparent 0%, transparent 75%, #000 0%, gray 100%);
                                background-size: 50px 50px;

            /*拓展--竹子*/
            background-image: linear-gradient(90deg, #fff 20%, transparent 0%, transparent 80%, #fff 0%),
                                linear-gradient(180deg, rgb(37,111,8) 60%, rgb(199,224,136) 96%, rgb(225,225,130) 0%);
                                background-size: 25px 50px;

            /*拓展--桌布*/
            background-image: linear-gradient(90deg, #fff 2%, transparent 0%, transparent 98%, #fff 0%),
                                linear-gradient(180deg, rgb(93,132,168) 96%, white 0%, white 100%);
                                background-size: 25px 25px;
                        /*拓展--星盘*/
            background-image:   radial-gradient(#000 8%, transparent 92%, #000 0%);
                                background-size: 25px 25px;
}

渐变介绍

渐变主要有四种：
linear-gradient()
repeating-linear-gradient()
radial-gradient()
repeating-radial-gradient()

以线性渐变为例子：linear-gradient()
接受参数：(direction, color-stop1, color-stop2, ...)
direction:可以接受left、right、bottom、top、left top、top right等，也接受deg角度，角度范围更大 $\color{red}{本人推荐}$ ；
color-stop:[颜色值[, value]]，value即截至位置，可以是px或者百分比。

径向渐变
background: -webkit-radial-gradient(<position>||<angle>,<shape> || <size>, start-color, ..., last-color);
shape: circle或者ellipse；
size:closest-side、farthest-side、closest-corner、farthest-corner

position:百分比和px、例如100% 0%或者100px 50px；
angle: 45deg

start-color:至少两种颜色：可以是颜色值，也可以定结束为值，例如：red 10% blue 30%

制作圆角示例

        div{
            margin: 0 auto;
            width: 200px;
            height: 200px;
            border: 1px solid gray;
            background: -webkit-radial-gradient(100% 0%, circle,  transparent 200px, orange 200px )
        }

image.png

制作凹角（浏览器标签）

        .container>div:nth-of-type(1){
            width: 300px;
            height: 100px;
            background: red;
            margin: 0 auto;
            border-radius: 10px 10px 0 0;
            position: relative;
        }

        .container>div:nth-of-type(1)::before{
            content: "";
            position: absolute;
            bottom: 0;left: -10px;
            width: 10px;
            height: 10px;
            background: -webkit-radial-gradient(0% 0%, circle,  transparent 10px, red 10px );
        }

        .container>div:nth-of-type(1)::after{
            content: "";
            position: absolute;
            bottom: 0;right: -10px;
            width: 10px;
            height: 10px;
            background: -webkit-radial-gradient(100% 0%, circle,  transparent 10px, red 10px );
        }       

        .container>div:nth-of-type(2){
            width: 100%;
            height: 100px;
            background: red;
        }

//  元素
    <div class="container">
        <div></div>
        <div></div>
    </div>

image.png