WEB前端第十五课——阴影及渐变
1.border-radius圆角
语法格式
border-radius:value，四个角
border-radius:value value，第一个value设置左上角和右下角，第二个value设置右上角和左下角
border-radius:value value value value，从左上角开始顺时针设置四个角
value单位：px、%、em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css圆角</title>
<style>
.circle{
width: 200px;
height: 300px;
background-color: greenyellow;
margin: auto;
border-radius: 50% 50% 45% 45%;
font-size: 60px;
color: #ef4222;
font-family: Algerian;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="circle">
egg
</div>
</body>
</html>
2.box-shadow盒阴影
属性值：h-shadow（必需，水平阴影的位置，允许负值）、v-shadow（必需，垂直阴影的位置，允许负值）、
blur（模糊距离）、spread（阴影尺寸）、color（阴影颜色）、inset（将外部阴影（outset）改为内部阴影）
书写格式：div { box-shadow: -6px, 7px, 8px, 9px, greenyellow; }，h-shadow负值代表左边（正值代表右边）、v-shadow负值代表上边（正值代表下边）
可以同时书写多组属性值，分别设置四条边样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css盒阴影</title>
<style>
.square1{
width: 100px;
height: 100px;
border: 4px solid greenyellow;
margin: 100px auto;
box-shadow: -6px 7px 8px 9px yellow;
}
.square2{
width: 100px;
height: 100px;
border: 4px solid greenyellow;
margin: 100px auto;
box-shadow: -6px 0px 9px 9px yellow,
0px -6px 9px 9px blue,
6px 0px 9px 9px orange,
0px 6px 9px 9px purple;
}
</style>
</head>
<body>
<div class="square1"></div>
<div class="square2"></div>
</body>
</html>
3.text-shadow文本阴影
属性值：h-shadow（必需，水平阴影位置，可负值）、v-shadow（必需，垂直阴影位置，可负值）、blur（模糊距离）、color（阴影颜色）
书写格式：div { text-shadow: -10px 20px 30px blue; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css文字阴影</title>
<style>
.text{
font-size: 80px;
font-family: 楷体;
color: orangered;
font-weight: bolder;
letter-spacing: 1em;
text-align: center;
text-shadow: -10px -5px 3px greenyellow;
}
</style>
</head>
<body>
<div class="text">避暑山庄</div>
</body>
</html>
4.gradients渐变，在两个或多个颜色之间显示平稳的过渡
两种渐变类型：
linear gradients，线性渐变
书写格式：background：linear-gradient（direction，color-stop1，color-stop2，……）;
direction值：默认为自上向下渐变，to bottom、to top、to right、to left、to bottom right、to left top等
也可以使用角度（数值）设置方向，0deg代表从下向上、90deg代表从左向右、180deg代表从上向下、-90deg代表从右向左
线性渐变至少设置两种颜色，默认情况下，每种颜色所占空间是均匀分布
radial gradients，径向渐变
书写格式：background：radial-gradient（center，shape，size，start-color，……，last-color）；
默认情况下，渐变的起点是center（中心），渐变的形状（shape）是ellipse（椭圆形）
center，渐变的起点可以通过“ at X Y”（像素）或“ at x% y%”坐标的方式设置（左上角作为0 0点坐标），还可以通过方位设置“ at left top”（或right、center、bottom等组合）
shape，渐变的形状也可以设置为 circle（圆形）
size，参数包括：closest-side（最近边）、farthest-side（最远边）、closest-Corner（最近角）、farthest-corner（最远角，默认值）
线性渐变至少设置两种颜色，默认情况下，每种颜色所占空间是均匀分布
5.linear-gradient线性渐变
① 自上向下渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS线性渐变</title>
<style>
.grad {
height: 200px;
background: -webkit-linear-gradient(red , blue); /* Safari */
background: -o-linear-gradient(red, blue); /* Opera */
background: -moz-linear-gradient(red, blue); /* Firefox */
background: linear-gradient(red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
② 从左向右渐变（不同的浏览器内核，方向设置方式不同）
<html>
<head>
<meta charset="utf-8">
<title>CSS线性渐变</title>
<style>
.grad {
height: 200px;
background: -webkit-linear-gradient(left, red, blue); /* Safari */
background: -o-linear-gradient(right, red, blue); /* Opera */
background: -moz-linear-gradient(right, red, blue); /* Firefox */
background: linear-gradient(to right, red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
③ 使用角度设置渐变
<html>
<head>
<meta charset="utf-8">
<title>CSS线性渐变</title>
<style>
.grad {
width: 300px;
height: 300px;
background: -webkit-linear-gradient(120deg, red, blue); /* Safari */
background: -o-linear-gradient(120deg, red, blue); /* Opera */
background: -moz-linear-gradient(120deg, red, blue); /* Firefox */
background: linear-gradient(120deg, red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
④ 颜色结点不均匀分布渐变
<html>
<head>
<meta charset="utf-8">
<title>CSS线性渐变</title>
<style>
.grad {
height: 500px;
background: -webkit-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Safari */
background: -o-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%);/* Opera */
background: -moz-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Firefox */
background: linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
⑤ 重复（循环）渐变
<html>
<head>
<meta charset="utf-8">
<title>CSS线性渐变</title>
<style>
.grad {
height: 500px;
background: -webkit-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Safari */
background: -o-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Opera */
background: -moz-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Firefox */
background: repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
⑥ 透明度渐变（通过rgba定义颜色和透明度）
<html>
<head>
<meta charset="utf-8">
<title>CSS线性渐变</title>
<style>
.grad {
height: 200px;
background: -webkit-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Safari */
background: -o-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1));/* Opera */
background: -moz-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Firefox */
background: linear-gradient(to right,rgba(255,0,255,0),rgba(255,0,255,1));/* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
6.radial-gradient径向渐变
① 从中心渐变
<html>
<head>
<meta charset="utf-8">
<title>CSS径向渐变</title>
<style>
.grad {
width: 500px;
height: 300px;
margin: 100px auto;
background: -webkit-radial-gradient(at center,yellow,orangered,black); /* Safari */
background: -o-radial-gradient(at center,yellow,orangered,black); /* Opera */
background: -moz-radial-gradient(at center,yellow,orangered,black); /* Firefox */
background: radial-gradient(at center,yellow,orangered,black); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
② 从四角渐变
<html>
<head>
<meta charset="utf-8">
<title>CSS径向渐变</title>
<style>
.grad {
width: 500px;
height: 300px;
margin: 100px auto;
background: -webkit-radial-gradient(at left top,yellow,orangered,black); /* Safari */
background: -o-radial-gradient(at left top,yellow,orangered,black); /* Opera */
background: -moz-radial-gradient(at left top,yellow,orangered,black); /* Firefox */
background: radial-gradient(at left top,yellow,orangered,black); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
③ 从四边渐变
<html>
<head>
<meta charset="utf-8">
<title>CSS径向渐变</title>
<style>
.grad {
width: 500px;
height: 300px;
margin: 100px auto;
background: -webkit-radial-gradient(at left center,yellow,orangered,black); /* Safari */
background: -o-radial-gradient(at left center,yellow,orangered,black); /* Opera */
background: -moz-radial-gradient(at left center,yellow,orangered,black); /* Firefox */
background: radial-gradient(at left center,yellow,orangered,black); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
④ 渐变大小和圆形渐变（注意：size、shape与center之间通过“空格”分开，而非逗号！）
<html>
<head>
<meta charset="utf-8">
<title>CSS径向渐变</title>
<style>
.grad {
width: 500px;
height: 300px;
margin: 100px auto;
background: -webkit-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Safari */
background: -o-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Opera */
background: -moz-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Firefox */
background: radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>
⑤ 重复渐变和不均匀分布渐变，类似线性渐变
