本文介绍了CSS中盒子模型的基本概念，包括如何设置盒子的大小，以及`box-sizing`属性的用法。此外，详细阐述了轮廓（outline）和阴影（box-shadow）的设置方法，以及圆角（border-radius）的使用，包括不同参数的含义和创建圆形元素的技巧。
盒子的大小
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。
设置盒子尺寸
box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值：
content-box： 默认值，宽度和高度用来设置内容区的大小。
border-box： 可选值，宽度和高度用来设置整个盒子可见框的大小。
轮廓、阴影设置
outline：轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素，用法和border一模一样(轮廓和边框不同的点，就是轮廓不会影响到可见框的大小)。
box-shadow：用来设置元素的阴影效果，阴影不会影响页面布局。
可选值：
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>盒子大小、轮廓、阴影、圆角的设置</title>
<link rel="stylesheet" href="../browser_default_style/reset.css">
<link rel="stylesheet" href="../css/box_sizing_outlin
最低0.47元/天 解锁文章
扫一扫
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
