盒子外观

盒子外观

盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing用来设置盒子尺寸的计算方式( 设置width和height的作用)

可选值: content-box默认值，宽度和高度用来设置内容区的大小

border-box宽度和高度用来设置整个盒子可见框的大小

width和height 指的是内容区和内边距和边框的总大小

轮廓和圆角

阴影

box-shadow用来设置元素的阴影效果，阴影不会影响页面布局

box-shadow:10px 10px 0px black;

第一个值 水平偏移量设置阴影的水平位置正值向右移动

第二个值 垂直偏移量设置阴影的水平位置正值向下移动

第三个值 阴影的模糊半径 第四个值 阴影的颜色

outline用来设置元素的轮廓线，用法和border一模一样 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

圆角

border- radius:用来设置圆角

border- radius:20px ;（半径 ）