CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）
一、理论：
1.border-radius:
a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示
b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半)
c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆
d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形
e.椭圆:需要设置圆角的水平和垂直方向的半径值
2.border-shadow:
a.none: 无阴影
b.inset: 区分内外阴影
c.x-offset:阴影水平偏移量
d.y-offset:阴影垂直偏移量
e.blur-radius:阴影模糊半径
f.color:颜色
1.border-radius:
a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示
b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半)
c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆
d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形
e.椭圆:需要设置圆角的水平和垂直方向的半径值
2.border-shadow:
a.none: 无阴影
b.inset: 区分内外阴影
c.x-offset:阴影水平偏移量
d.y-offset:阴影垂直偏移量
e.blur-radius:阴影模糊半径
f.color:颜色
二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1{
width: 50px;
height: 50px;
background-color: #239285;
margin: 30px;
}
.div2{
width:100px;
height: 50px;
background-color: #239587;
border-radius: 50px 50px 0 0;
}
.div3{
width: 50px;
height: 100px;
background-color: #231587;
border-radius: 0 50px 50px 0;
}
.div4{
width: 100px;
height: 50px;
background-color: #219587;
border-radius: 0 0 50px 50px;
}
.div5{
width: 50px;
height: 100px;
background-color: #239597;
border-radius: 50px 0 0 50px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: #239285;
margin: 30px;
}
.div2{
width: 100px;
height: 100px;
background-color: #239587;
border-radius:100px 0 0 0;
}
.div3{
width: 100px;
height: 100px;
background-color: #231587;
border-radius: 0 100px 0 0;
}
.div4{
width: 100px;
height: 100px;
background-color: #219587;
border-radius: 0 0 100px 0;
}
.div5{
width: 100px;
height: 100px;
background-color: #239597;
border-radius: 0 0 0 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1{
background-color: cyan;
margin:30px;
height: 300px;
}
.div2{
width: 100px;
height: 50px;
background-color: #239587;
border-radius: 100px / 50px;
}
.div3{
width: 50px;
height: 100px;
background-color: #231587;
border-radius: 50px /100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box-shadow{
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
}
.top{
box-shadow:0 -2px 0 #202189;
}
.right{
box-shadow: 2px 0 0 #203893;
}
.bottom{
box-shadow: 0 2px 0 #832982;
}
.left{
box-shadow: -2px 0 0 #235662;
}
</style>
</head>
<body>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box-shadow1{
width: 200px;
height: 100px;
border-radius: 10px;
border:1px solid #aeaeae;
margin: 20px;
box-shadow: 0 0 10px #189356;
}
.box-shadow2{
width: 200px;
height: 100px;
border-radius: 10px;
border:1px solid #aeaeae;
margin: 20px;
box-shadow: 0 0 10px 10px #289356;
}
.box-shadow3{
width: 200px;
height: 100px;
border-radius: 10px;
border:1px solid #aeaeae;
margin: 20px;
box-shadow: 0 0 10px -10px #285356;
}
</style>
</head>
<body>
<div class="box-shadow1"></div>
<div class="box-shadow2"></div>
<div class="box-shadow3"></div>
</body>
</html>6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
margin: 30px;
}
.border{
border:10px solid #291153;
}
.box-shadow{
box-shadow: 0 0 10px #283966;
}
</style>
</head>
<body>
<div class="box border">border</div>
<div class="box box-shadow">box-shadow</div>
</body>
</html>