css10个盒子 |css3实现外阴影

.box{
width: 50px;
height: 50px;
padding: 10px;
margin: 10px;
border: 1px solid #000;
}

width：盒子的宽度，包括元素内容、内边距和边框。

height：盒子的高度，包括元素内容、内边距和边框。

padding：元素内容周围的内边距，即元素内容与边框之间的空间。

margin：元素周围的外边距，即元素与其他元素之间的空间。

border：边框的大小及样式，可以为元素内容划定边界。

.box{
box-sizing: content-box;
}

content-box：W3C盒子模型属性，元素的宽度和高度仅包括元素的内容部分，不包括padding、border和margin。

.box{
box-sizing: border-box;
}

border-box：IE盒子模型属性，元素的宽度和高度包括元素的内容、内边距、边框，但不包括margin。

.box{
display: inline-block;
}

display：盒子的显示方式，包括以下常用值：block、inline-block、inline、none。

.box{
position: relative;
top: 10px;
left: 10px;
}

position和top/left：盒子的定位方式，可以用来实现页面布局和动画效果。

.box{
float: left;
clear: both;
}

float和clear：浮动和清除浮动，常用于实现页面的多列布局。

.box{
overflow: hidden;
}

overflow：盒子的溢出处理方式，可以用来实现页面的滚动效果。

.box{
z-index: 1;
}

z-index：盒子的层级关系，可以用来控制元素的前后顺序。

综上所述，CSS盒模型的10个重要属性可以用来控制元素的大小、内边距、边框、外边距、布局和动画效果。对于前端开发人员来说，熟练掌握CSS盒模型的相关知识是非常必要的。