一、盒子大小（box-sizing）
- 默认情况下，盒子可见框大小由内容区、内边距和边框组成
box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box：默认值，宽度和高度用来设置内容区域
border-box：宽度和高度用来设置整个盒子可见框的大小
width和height 指的是内容区、内边距 和边框的总大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子大小box-sizing</title> <style> div{ width: 50px; height: 40px; background-color: orange; border: 2px solid skyblue; padding: 4px; box-sizing: border-box; } </style> </head> <body> <div></div> </body> </html>
二、轮廓（outline）
作用：用来设置元素的边框线，用法与border一模一样
不占据文档流的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮廓线outline</title> <style> .box{ width: 50px; height: 50px; background-color: orange; } .box:hover { outline: 10px yellow solid; } </style> </head> <body> <div class="box"></div> </body> </html>
三、阴影（box-shadow）
box-shadow：设置元素的阴影效果，阴影不会影响页面布局
第一个值：水平偏移量（设置阴影的水平位置，正值向右，负值向左）
第二个值：垂直偏移量
第三个值：阴影的模糊半径
第四个值：阴影的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-shadow</title> <style> .box{ width: 50px; height: 50px; background-color: orange; box-shadow: 2px 4px 3px #999; } </style> </head> <body> <div class="box"></div> </body> </html>
四 、 圆角（border-radius）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-radius</title> <style> .box{ width: 50px; height: 50px; background-color: orange; /* border-radius: 50%; */ /* border-radius: 10px; */ /* border-radius: 5px 10px; */ /* border-radius: 2px 6px 10px 20px; */ /* border-radius: 3px 10px 6px; */ } </style> </head> <body> <div class="box"></div> </body> </html>