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-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
