css新增了圆角边框、盒子阴影以及文字阴影的样式。
圆角边框
它的语法如下：
border-radius:length;
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框</title>
<style>
.yuanjiaobiankuang {
width: 300px;
height: 200px;
background-color: aquamarine;
border-radius: 20px;
}
.yuanxing {
width: 300px;
height: 200px;
background-color: aquamarine;
border-radius: 50%;
}
.yuanjiaojuxing {
width: 300px;
height: 200px;
background-color: aquamarine;
border-radius: 100px;
}
.teshu {
width: 300px;
height: 200px;
background-color: aquamarine;
border-radius: 50px 0 50px 0;
/* 也可以这样写，分别是对角线：border-radius: 50px 0; */
}
</style>
</head>
<body>
<div class="yuanjiaobiankuang"></div>
<div class="yuanxing"></div>
<div class="yuanjiaojuxing"></div>
<div class="teshu"></div>
</body>
</html>
结果演示
盒子阴影（重点）
语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
阴影的颜色一般设置为半透明的黑色，比如这样：rgba(0, 0, 0, .3)
阴影不占用其他元素空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
div {
width: 300px;
height: 400px;
background-color: aquamarine;
}
div:hover {
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果演示
文字阴影
语法：
text-shadow: h-shadow v-shadow blur color;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影</title>
<style>
p {
font-size: 50px;
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<p>阴影</p>
</body>
</html>
结果演示
