一：设置盒子大小-box-sizing
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
box-sizing 属性用来设置盒子尺寸的计算方式， 也就是 width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
二：设置盒子阴影- box-shadow（ 参数1，参数2，参数3，参数4）
设置元素的阴影效果，不会影响到页面布局
第一个值：水平偏移量 正->左 负->右
第二个值：垂直偏移量 正->下 负->上
第三个值：模糊半径
第四个值：颜色
三：设置盒子圆角-border-radius
border-radius 用来设置圆角 以XXpx为半径画圆
还可以单独设置一角的圆角
border-top-right-radius
border-top-left-radius
border-bottom-left-radius
border-bottom-right-radius
设置圆形
border-radius: 50%;
<!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>Document</title><style>.box{width: 100px;height: 100px;background-color: red;border: 10px solid yellowgreen;box-sizing:border-box; }.box1 {width: 200px;height: 200px;background-color: #f60;box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);}.box2 {width: 200px;height: 200px;background-color: #bfa;/* border-radius: 10px 50px; *//* border-radius:50%; */border-top-right-radius:50px;}</style></head><body><!-- 阴影例子 --><div class="box1 box"></div><!-- 圆角例子 --><div class="box2"></div></body>
</html>
覆盖优化 - 附代码)
