CSS3学习（六）：盒模型补充

最新推荐文章于 2026-06-22 22:05:57 发布

原创最新推荐文章于 2026-06-22 22:05:57 发布 · 464 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #学习 #css #前端

前端学习同时被 2 个专栏收录

119 篇文章

订阅专栏

CSS3

16 篇文章

订阅专栏

本文详细介绍了CSS中盒子模型的两种尺寸计算方式——content-box和border-box，以及如何使用border-radius创建圆角效果。此外，还探讨了outline定义元素轮廓线的特点，以及box-shadow设置阴影的语法和应用。这些属性能够丰富网页元素的视觉表现，同时不影响页面布局。

1、盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：

content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小

2、轮廓

outline用来设置元素的轮廓线，用法和border一模一样

轮廓和边框不同点是，轮廓线不会占据空间

3、阴影

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

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

阴影示例

4、圆角

border-radius 用来设置圆角，圆角设置的是圆的半径大小
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 分别设置四个角

border-radius 可以分别指定四个角的圆角