[分享]css3属性的盒子属性

CSS3盒子属性是指控制HTML元素布局的属性，如元素的宽度、高度、边框、内边距和外边距等。CSS3新增了许多样式属性来控制盒子的样式。.box { width: 200px; height: 100...

CSS3盒子属性是指控制HTML元素布局的属性，如元素的宽度、高度、边框、内边距和外边距等。CSS3新增了许多样式属性来控制盒子的样式。

.box {
    width: 200px;
    height: 100px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px;
    box-shadow: 2px 2px 5px #ccc;
} 

其中，width和height属性分别控制元素的宽度和高度。它们可以取百分比或具体的像素值。当使用百分比的时候，元素的宽度和高度分别根据其父元素的宽度和高度进行计算。

border属性控制元素的边框，包括边框的宽度、样式和颜色。可以使用简写的方式，如border: 1px solid #ccc;。

padding属性控制元素的内边距，也就是元素内容和边框之间的距离。例如上面的代码中，元素的内边距为10px。

margin属性控制元素的外边距，也就是元素之间的距离。

box-shadow属性控制元素的阴影效果。它接受一组参数，其中第一个参数是水平阴影的偏移量，第二个参数是垂直阴影的偏移量，第三个参数是阴影的模糊半径，第四个参数是阴影的颜色。

除了以上属性之外，CSS3还新增了一些盒子属性，如border-radius用于控制元素的圆角效果，box-sizing用于控制盒子的大小计算方式等等。