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> |
