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-stop:[颜色值[, value]]，value即截至位置，可以是px或者百分比。

径向渐变

background: -webkit-radial-gradient(||, || , 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;

}

// 元素

image.png