CSS盒模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。
1.盒子模型概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
背景应用于内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以通过通用选择器对所有元素进行设置。
在css中，width和height指的是内容边框的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
2.值复制
2.1 简单介绍
有时，我们会输入一些重复的值：
p{
margin:0.5em 1em 0.5em 1em;
}通过值复制，就可以不必重复地键入这对数字，上面的规则与下面的规则是等价的：
p{
margin:0.5em 1em;
}2.2 值复制的规则（以外边距为例）
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
换句话说，如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。如果给定了两个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。最后一个情况，如果只给定1个值，那么其它3个外边距都由这个值（上外边距）复制得到。
利用这个简单的规则，我们只需指定必要的值，而不必全部都应用4个值。例如：
h1{margin:0.25em 1em 0.5em;} /*等价于0.25em 1em 0.5em 1em*/
h2{margin:0.5em 1em;} /*等价于0.5em 1em 0.5em 1em*/
p{margin:1px;} /*等价于1px 1px 1px 1px*/但是，这种做法并不适用于所有的情况。例如：假设希望把p元素的上外边距和左外边距设置为20px，下外边距和右外边距设置为30px.在这种情况下，必须写作：
p{
margin:20px 30px 30px 20px;
}在这种情况下，所需值得个数没有办法更少了。同样，如果希望除了左外边距以外所有其它外边距都是auto（左外边距是20px)：
p{
margin:auto auto auto 20px;
}3.CSS内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。CSS padding属性定义元素边框与元素内容之间的空白区域。padding属性接受长度值或百分比值，但不允许使用负值。例如：
/*将所有h1元素的各边都有10元素的内边距*/
h1{
padding:10px;
}
/*按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值*/
h1{
padding:10px 0.25em 2ex 20%;
}3.1 单边内边距属性
也可以通过下面四个单独的属性，分别设置上、右、下、左内边距：
h1{
padding-top:10px;
padding-right:0.25em;
padding-bottom:2ex;
padding-left:20%;
}3.2 内边距的百分比数值
百分数值是相对于其父元素的width计算的，这一点和外边距一样。所以，如果父元素的width改变，它们也会改变。
/*把段落的内边距设置为父元素width的10%*/
p{
padding:10%;
}例如：
<html>
<head>
<style type="text/css">
p{
padding:10%;
}
</style>
</head>
<body>
<div style="width:200px;">
<p>This paragraph is contained within a DIV that has a width of 200 pexels.</p>
</body>
</html>
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
3.3 内边距属性
| 属性 | 描述 |
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
| padding-bottom | 设置元素的下内边距。 |
| padding-left | 设置元素的左内边距。 |
| padding-right | 设置元素的右内边距。 |
| padding-top | 设置元素的上内边距。 |
4.CSS边框
元素的边框（border）是围绕元素内容和内边距的一条或多条线。CSS border属性允许规定元素边框的样式、宽度和颜色。
在HTML中，我们使用表格来创建文本周围的边框，但是通过使用CSS边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的边框。元素的边框就是围绕元素内容和内边距的一条或多条线。
每个边框有3个方面：宽度、样式、颜色。
4.1 边框与背景
CSS规范指出：“边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如：点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。
CSS2指出背景只延申到内边距，而不是边框。后来CSS2.1进行了更正：元素的背景是内容、内边距和边框内的背景。大多数浏览器都遵循CSS2.1定义，不过一些较老的浏览器可能会有不同的表现。
4.2 边框的样式
样式是边框最重要的一个方面，因为如果没有样式，将根本没有边框。CSS的border-style属性定义了10个不同的非inherit样式，包括none。
| 值 | 描述 |
| none | 定义无边框 |
| hidden | 与"none"相同。不过应用于表时除外，对于表，hidden用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为虚线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于border-width的值。 |
| groove | 定义3D凹槽边框。其效果取决于border-color的值。 |
| ridge | 定义3D垄状边框。其效果取决于border-color的值。 |
| inset | 定义3D inset边框。其效果取决于border-color的值。 |
| outset | 定义3D outset边框。其效果取决于border-color的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
如：
<html>
<head>
<style type="text/css">
p.dotted{
border-style:dotted;
}
p.dashed{
border-style:dashed;
}
p.solid{
border-style:solid;
}
p.double{
border-style:double;
}
p.groove{
border-style:groove;
}
p.ridge{
border-style:ridge;
}
p.inset{
border-style:inset;
}
p.outset{
border-style:outset;
}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">A inset border</p>
<p class="outset">A outset border</p>
</body>
</html>效果：
4.3 定义多种样式
可以为一个边框按照上、右、下、左的顺序依次定义边框格式，如：
p.aside{
border-style:solid dotted dashed double;
}
/*为类名为aside的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框*/4.4 定义单边样式
如果希望为元素框的某一个边设置边框样式，而不是设置所有4个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style下面两种方法是等价的：
p{
border-style:solid solid solid none;
}
p{
border-style:solid;
border-left-style:none;
}
注意：如果要使用第二个方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在border-style之前，简写属性的值就会覆盖单边值none。4.5 边框的宽度
可以通过border-width属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、medium（默认值）和thick。
注意：CSS没有定义3个关键字的具体宽度，所以一个用户代理可能把thin、medium和thick分别设置为等于5px、3px和2px，而另一个用户代理则分别设置为3px、2px和1px。所以我们可以这样设置边框的宽度：
p{
border-style:solid;
border-width:5px;
}
或者：
p{
border-style:solid;
border-width:thick;
}4.6 定义单边宽度
可以按照top、right、bottom、left的顺序设置元素的各边边框：
p{
border-style:solid;
border-wodth:15px 5px 15px 5px;
}
也可以简写为（这样的写法称为值复制）：
p{
border-style:solid;
border-width:15px 5px;
}
也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width
如：
p{
border-style:solid;
border-top-width:15px;
border-right-width:5px;
border-bottom-width:15px;
border-left-width:5px;
}4.7 没有边框
即设置border-style的属性值为none（默认值）。此时边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为0，而不论原先定义的是什么。
由于none是border-style的默认值，因此如果希望边框出现，就必须声明一个边框样式。如：
h1{
border-width:20px;
}
/*所有h1元素都不会有任何边框，更不用说20像素宽了*/4.8 边框颜色
border-color属性，它一次最多可以接受4个颜色值。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和RGB值：
p{
border-style:solid;
border-color:blue rgb(25%,35%,45%) #909090 red;
}如果颜色值小于4个，值复制就会起作用（下边框颜色复制上边框颜色，左边框颜色复制右边框颜色）：
p{
border-style:solid;
border-color:blue red;
}注意：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为color颜色可以继承）。这个父元素可能是body、div或另一个table。
4.9 定义单边颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
如：
h1{
border-style:solid;
border-color:black;
border-right-color:red;
}
/*为h1元素指定实线黑色边框，而右边框为实线红色*/4.10 透明边框
如果想设置边框颜色为透明色，则设置border-color的值为transparent。
总结：
CSS边框属性：
| 属性 | 描述 |
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度。或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框颜色。 |
| border-bottom-style | 设置元素的下边框样式 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| boder-left-color | 设置元素的左边框颜色。 |
| border-left-style | 设置元素的左边框样式。 |
| border-left-width | 设置元素左边框宽度。 |
| boder-top | 间歇属性，用于把上边框的所有属性设置到一个声明中。 |
5.CSS外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数甚至负值。
5.1 CSSmargin属性
设置外边距需要使用margin属性，margin属性接受任何长度单位，可以是像素、英寸、毫米或者em。margin可以设置为auto，如
/*在h1元素的各个边上设置了1/4英寸宽的空白*/
h1{
margin:0.25in;
}
/*为h1元素的四个边设置不同的外边距，所使用的单位是px（像素）*/
h1{
margin:10px 0px 15px 5px;
}
与内边距的设置相同，这些值的顺序是从上外边距(top)开始围绕着元素顺时针旋转的：
margin:top right bottom left
另外，还可以为margin设置一个百分比数值：
p{
margin:10%;
}
百分数是相对于父元素的width计算的，上面的例子为p元素设置的外边距是其父元素的width的10%.margin的默认值是0，所以如果没有为margin声明一个值，就不会出现外边距。但是，在实际情况中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持CSS的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为p元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
5.2 单边外边距属性
可以使用单边外边距属性为元素单边上的外边距设置值。假设希望把p元素的某一边的外边距设置为20px.不必使用margin（需要键入很多auto），而是可以采用以下方法：
margin-top
margin-right
margin-bottom
margin-left
可以使用任何一个属性来设置相应边上的外边距，而不会直接影响其它外边距。
一个规则中可以使用这个单边属性，如：
h1{
marign-top:20px;
margin-right:30px;
margin-bottom:30px;
margin-left:20px;
}一般来说，如果希望为多个边设置外边距，使用margin会更容易一些。不过，从文档显示的角度看，实际上使用哪种方法都不重要，所以应该选择对自己更容易的方法。
5.3 CSS外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
6.盒模型与display属性
HTML组件中呈现一片空白领域的组件都可当做盒模型，比如<div../>元素、<span../>元素、<section../>等元素。而CSS则提供了display属性来控制盒模型的外观。
6.1 两种最基本的盒模型
block模型：这种盒模型的组件默认占据一行，允许通过CSS来设置宽度、高度。例如:<div../>、<p../>元素。
inline模型：这种盒模型的组件不会占据一行（默认允许在一行放置多个组件）。即使通过CSS设置宽度、高度也不会起作用。例如<span.../>、<a.../>、<img.../>元素。
对比两种基本盒模型：
<html>
<head>
<meta charset="UTF-8">
<title>基础盒模型</title>
<style type="text/css">
div,span{
width:300px;
height:40px;
border:1px solid black;
}
</style>
</head>
<body>
<div>div元素1</div>
<div>div元素2</div>
<span>span元素1</span>
<span>span元素2</span>
</body>
</html>
上面页面中定义了两个<div../>元素和两个<span../>元素，页面的CSS代码设置了<div../>、<span../>元素的高度为40px，宽度为300px.但由于<span../>元素默认是inline盒模型，因此设置的宽度与高度对它不起作用。
CSS为display属性提供了block、inline两个属性值，用于改变HTML组件默认的盒模型。
/*使用display属性破坏HTML组件默认的盒模型*/
<html>
<head>
<meta charset="UTF-8">
<title>基础盒模型</title>
<style type="text/css">
div,span{
width:300px;
height:40px;
border:1px solid black;
}
body>div{
display:inline;
}
body>span{
display:block;
}
</style>
</head>
<body>
<div>div元素1</div>
<div>div元素2</div>
<span>span元素1</span>
<span>span元素2</span>
</body>
</html>
6.2 none值
display属性还可以指定为none值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面空间也会释放。与此类似的还有visibility属性，该属性也可用于设置目标对象是否显示。与display属性不同，当通过visibility隐藏某个HTML元素后，该元素占用的页面空间依然会被保留。visibility属性的两个常用值为visible和hidden，分别用于控制目标对象的显示和隐藏。
<html>
<head>
<meta charset="UTF-8">
<title>隐藏元素</title>
<style type="text/css">
div{
width:300px;
height:40px;
background-color:#dddddd;
border:2px solid black;
}
</style>
</head>
<body>
<input type="button" value="隐藏"
onclick="document.getElementById('test1').style.display='none';"/>
<input type="button" value="显示"
onclick="document.getElementById('test1').style.display='';"/>
<div id='test1'>
使用display控制对象的显示与隐藏
</div>
<hr/>
<input type="button" value="隐藏"
onclick="document.getElementById('test2').style.visibility='hidden';"/>
<input type="button" value="显示"
onclick="document.getElementById('test2').style.visibility='visible';"/>
<div id='test2'>
使用visibility来控制对象的显示与隐藏
</div>
<hr/>
</body>
</html>20200409
6.2 inline-block盒模型
CSS还提供了一种inline-block模型，通过为display属性设置inline-block即可实现这种盒模型，这种盒模型是inline模型和block模型的综合体；inline-block盒模型的元素既不会占据一行，同时也可以通过width、height指定宽度和高度。
通过使用inline-block盒模型可以非常方便地实现多个<div../>元素并列显示，也就是说，使用inline-block盒模型可以实现多栏布局。
在默认情况下，多个inline-block盒模型的组件将会采用底端对齐的方式，也就是它们的底部将会位于同一条水平线上，这可能不是多栏布局期望的结果。为了让多个inline-block盒模型的组件在顶端对齐，为它们增加vertical-align:top;即可。
6.3 inline-table盒模型
在默认情况下，<table../>元素属于block盒模型，也就是说，该元素默认占据一行：它的左边不允许出现任何元素，右边也不允许出现其它元素。该元素可以通过width、height设置宽度和高度。
CSS为<table../>元素提供了一个inline-table盒模型，这个盒模型允许表格通过width、height设置宽度和高度，而且允许它的左右两边出现其它内容。
为了控制表格与前、后内容垂直对齐，可以通过添加vertical-align属性来实现，设置该属性为top，表示让表格与前后内容顶端对齐；设置该属性为bottom，表示让表格与前后内容底端对齐。
6.4 表格相关的盒模型
CSS3还为display提供如下属性值。
| 值 | 描述 |
| table | 将目标HTML组件显示为表格 |
| table-caption | 将目标HTML组件显示为表格标题 |
| table-cell | 将目标HTML组件显示为单元格 |
| table-column | 将目标HTML组件显示为表格列 |
| table-column-group | 将目标HTML组件显示为表格列祖 |
| table-header-group | 将目标HTML组件显示为表格头部分 |
| table-footer-group | 将目标HTML组件显示为表格页脚部分 |
| table-row | 将目标HTML组件显示为表格行 |
| table-row-group | 将目标HTML组件显示为表格行组 |
通过这些盒模型，可以使用<div../>元素构建表格。
<html>
<head>
<meta charset="UTF-8">
<title>inline-table盒模型</title>
<style type="text/css">
div>div{
display:table-row;
padding:10px;
}
div>div>div{
display:table-cell;
border:1px solid black;
}
</style>
</head>
<body>
<div style="display:table;width:400px;">
<div style="display:table-caption;">Java课程体系</div>
<div>
<div>Java从入门到精通</div>
<div>多线程从入门到精通</div>
</div>
<div>
<div>js从入门到精通</div>
<div>node.js从入门到精通</div>
</div>
</body>
</html>
在上述页面中，虽然都是<div../>元素，但由于这些元素的display属性设置为表格相关的盒模型，因此各div元素将会组成一个表格。
6.5 list-item盒模型
list-item模型可以将目标组件转换为类似于<ul../>的列表元素，也可以同时在元素前面添加列表标志。
示例：将div元素变为列表展示
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
display:list-item;
list-style-type:square;
margin-left:20px;
}
</style>
</head>
<body>
<div>Java从入门到精通</div>
<div>Spring从入门到精通</div>
<div>JavaScript从入门到精通</div>
</body>
</html>
实际上，如果为不同元素添加不同的列表符号，并使用不同的margin-left，就可以通过list-item盒模型实现多级列表的效果：
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body>div{
display:list-item;
list-style-type:disc;
margin-left:20px;
}
div>div{
display:list-item;
list-style-type:square;
margin-left:40px;
}
</style>
</head>
<body>
<div id="div1">Java课程体系
<div>JavaSE</div>
<div>Java多线程</div>
<div>Java类集</div>
</div>
<div id="div2">JavaEE课程体系
<div>SpringCore</div>
<div>SpringMVC</div>
<div>SpringBoot</div>
</div>
</body>
</html>
7.布局相关属性
7.1 通过float属性实现多栏布局
通过使用float属性，可以很方便地基于<div../>元素来设计导航菜单、多栏布局等效果。
float属性控制目标HTML组件是否浮动以及如何浮动。当通过该属性设置某个对象浮动后，该对象将被当作块(block-level)组件处理，即相当于display属性被设置为block。也就是说，即使为浮动组件的display设置了其它属性值，该属性值依然是block。浮动HTML组件将会漂浮紧紧跟随它的前一个组件，直到遇到边框、padding、margin、另一个块组件为止。该属性支持left、right两个属性值，分别指定对象向左、向右浮动。
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
margin:0px;
}
div#container{
width:960px;
margin:auto;
}
div>div{
border:1px solid #aaf;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
background-color:#ffc;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div style="float:left;width="220px">
<h2>JavaSE课程体系</h2>
<ul>
<li>Java Thread</li>
<li>Java Collections</li>
<li>JVM</li>
</ul>
</div>
<div style="float:left;width="550px">
<h2>JavaEE课程体系</h2>
<ul>
<li>Mybatis</li>
<li>SpringCore</li>
<li>SpringMVC</li>
</ul>
</div>
<div style="float:left;width="240px">
<h2>前端课程体系</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
</html>
7.2 使用clear属性实现换行
clear属性用于设置HTML组件的左、右是否允许出现“浮动”组件。如果该属性指定为left，则左边不允许出现“浮动”组件。如果指定为both，则两边都不允许出现浮动组件。借助于clear属性，可以让“浮动”组件换行。
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div>div{
width:220px;
padding:5px;
margin:2px;
float:left;
background-color:#ddd;
}
</style>
</head>
<body><br/><br/>
<div>
<div>C语言</div>
<div>C++</div>
<div style="clear:both;">Java</div>
<div>JS</div>
</div>
</body>
</html>
上述代码为4个子div元素都设置了向左浮动，这会让他们都浮向左边，如果宽度足够，它们会并排排成一行。但由于将第三个div元素设置了clear:both，这意味着它的左右两边不允许出现浮动元素，因此会在该元素前后换行。
7.3 控制组件的滚动条
CSS提供了overflow、overflow-x、overflow-y三个属性值来控制HTML组件不够容纳内容时的显示方式，这三个属性的功能基本类似，区别只是overflow同时控制两个方向，而overflow-x只控制水平方向，overflow-y只控制垂直方向。
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
width:300px;
height:70px;
white-space:nowrap;
border:1px solid black;
margin:15px;
}
</style>
</head>
<body><br/><br/>
<div>
<h3>不设置overflow属性</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow:hidden;">
<h3>overflow:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow:auto;">
<h3>overflow:auto;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-x:hidden;">
<h3>overflow-x:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-y:hidden;">
<h3>overflow-y:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</body>
</html>
7.4 CSS新增的box-shadow属性
该属性用于为整个盒模型添加阴影。box-shadow属性可以为所有盒模型的元素整体添加阴影。这是一个复合属性，包含有如下5个值：
hOffset：该属性值控制阴影在水平方向的偏移。
vOffset：该属性值控制阴影在垂直方向的偏移。
blurLength：该属性值控制阴影的模糊程度。
scaleLength：该属性值控制阴影的缩放程度。
color：该属性值控制阴影的颜色。
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
width:300px;
height:50px;
border:1px solid black;
margin:30px;
}
</style>
</head>
<body>
<div style="box-shadow:-10px -8px 6px #444">
box-shadow:-10px -8px 6px #444;（左上阴影）
</div>
<div style="box-shadow:10px -8px 6px #444">
box-shadow:10px -8px 6px #444;（右上阴影）
</div>
<div style="box-shadow:-10px 8px 6px #444">
box-shadow:-10px 8px 6px #444;（左下阴影）
</div>
<div style="box-shadow:10px 8px 6px #444">
box-shadow:-10px -8px 6px #444;（右下阴影）
</div>
<div style="box-shadow:10px 8px #444">
box-shadow:10px 8px #444;（右下阴影，不指定模糊程度）
</div>
<div style="box-shadow:10px 8px 20px #444">
box-shadow:10px 8px 20px #444;（右下阴影，增大模糊程度）
</div>
<div style="box-shadow:10px 8px 10px -10px blueviolet">
box-shadow:10px 8px 10px -10px blueviolet;（右下阴影，缩小阴影）
</div>
<div style="box-shadow:10px 8px 10px 15px blueviolet;">
box-shadow:10px 8px 10px 15px blueviolet;（右下阴影，增大阴影）
</div>
</body>
</html>
通过box-shadow还可以为表格、单元格添加阴影：
<html>
<head>
<meta charset="UTF-8">
<title>box-shadow属性</title>
<style type="text/css">
table{
width:500px;
border-spacing:10px;
box-shadow:10px 10px 6px #444;
}
td{
box-shadow:6px 6px 4px #444;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>JavaSE Thread</td>
<td>JavaSE Collections</td>
</tr>
<tr>
<td>JavaEE SpringCore</td>
<td>JavaEE SpringMVC</td>
</tr>
</table>
</body>
</html>
扫一扫
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
