1、CSS3新增盒子属性
1.1 box-sizing
设置盒子的大小。
- content-box：设置内容区的大小；
- border-box：设置盒子的总大小。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
.d1 {
height: 200px;
width: 200px;
padding: 5px;
margin: 5px;
border: 1px solid black;
background-color: aqua;
text-align: center;
line-height: 200px;
box-sizing: content-box;
}
.d2 {
height: 200px;
width: 200px;
padding: 5px;
margin: 5px;
border: 1px solid black;
background-color: blanchedalmond;
text-align: center;
line-height: 200px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="d1">设置内容区大小</div>
<div class="d2">设置盒子大小</div>
</body>
</html>
1.2 resize
使得盒子的大小用户可调，需要给overflow属性。
- none：不允许用户调节大小；
- both：可以调节高度和宽度；
- horizontal：可以调节宽度；
- vertical：可以调节高度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>resize</title>
<style>
.inner {
height: 300px;
width: 300px;
background-color: antiquewhite;
border: 1px solid skyblue;
}
.d1 {
height: 200px;
width: 200px;
background-color: aqua;
overflow: hidden;
resize: both;
border: 1px solid black;
}
.d2 {
height: 200px;
width: 200px;
background-color: rgb(68, 151, 112);
overflow: hidden;
resize: horizontal;
border: 1px solid black;
margin-top: 10px;
}
.d3 {
height: 200px;
width: 200px;
background-color: rgb(46, 153, 153);
overflow: hidden;
resize: vertical;
border: 1px solid black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="d1">
<div class="inner"></div>
</div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
1.3 box-shadow
- box-shadow: 5px 5px 20px 10px yellow inset;
- 分别代表：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 必须有水平和垂直位置，其它属性可选
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
div {
height: 200px;
width: 200px;
text-align: center;
line-height: 200px;
background-color: red;
font-size: 20px;
margin: 0 auto;
box-shadow: 0px 0px 80px 10px black inset;
}
</style>
</head>
<body>
<div>阴影</div>
</body>
</html>
1.4 opacity
调整元素不透明度，范围为0-1，0为完全透明，1为完全不透明。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>opacity</title>
<style>
div {
width: 200px;
height: 200px;
margin: auto;
background-color: aqua;
border: 1px solid black;
position: relative;
text-align: center;
}
h2 {
position: relative;
opacity: 0.3;
top: 30px;
}
</style>
</head>
<body>
<div>
<h2>不透明度</h2>
</div>
</body>
</html>