边框 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
CSS 边框 在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。 边框的样式 样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。
1、边框倒角 属性：border-radius 该属性为简写属性，可以设置四个角的倒角半径 取值：以px为单位 或 以 % 为单位
单角定义: border-top-left-radius:左上角 border-bottom-right-radius:右下角 border-bottom-left-radius:左下角 border-top-right-radius:右上角练习： 边框倒角实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #d1{ width:200px; height:200px; border:2px solid #000; /*倒角*/ border-radius:50%; } </style> </head> <body> <div id="d1"></div> </body> </html>2、边框阴影 给元素增加阴影 属性：box-shadow 取值：多属性值列表 box-shadow:h-shadow v-shadow blur spread color inset; h-shadow:必须 阴影的水平偏移距离，取值为正，向右偏，取值为负，向左偏 v-shadow:必须 阴影的垂直偏移距离，取值为正，向下偏，取值为负，向上偏 blur:可选，模糊距离 spread:可选，阴影的扩充尺寸 color:可选，阴影的颜色 inset:可选值，将默认的外阴影改为内阴影
练习： 年框阴影实例： <!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #d1{ width:200px; height:200px; border:1px solid #666; /*阴影*/ /*box-shadow:10px 10px #654321;*/ /*水平偏移，垂直偏移，模糊距离，阴影颜色 ：模拟元素外发光效果*/ box-shadow:0px 0px 5px red; } input,summary{ outline:0; } </style> </head> <body> <p> 用户名： <input> </p> <details open=""> <summary>摘要与细节</summary> </details> <div id="d1"></div> </body> </html>3、轮廓 1、什么是轮廓 绘制于元素边框周围的一条线 2、属性 outline:width style color; outline-width:宽度 outline-style:样式 outline-color:颜色
常用： outline:0; outline:none;练习： CSS轮廓实例：
<!DOCTYPE html > <html> <head> <style type="text/css"> p { border:red solid thin; outline:#00ff00 dotted thick; } </style> </head> <body> <p><b>世间美好与你环环相扣</p> </body> </html>2、框模型(重难点) CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* { margin: 0; padding: 0; }在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
1、框模型 框：盒子(box) 页面元素皆为框 框模型：(box-model)定义了元素处理内容，内边距，外边距，边框的一种方式 元素的 width和height属性 指定了内容区域的宽度和高度 元素的边框是绘制于元素外围的一条线，会扩大元素的占地尺寸 内边距和外边距 也会增加元素的占地尺寸，但不会影响元素的内容区域 元素的实际宽度=左右外边距+左右边框+左右内边距+width 元素的实际高度=上下外边距+上下边框+上下内边距+height练习: 框模型实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #d1{ /*内容区域尺寸*/ width:200px; height:200px; background-color:red; /*边框：会增加元素的占地尺寸*/ border:2px solid black; } </style> </head> <body> <div id="d1"></div> </body> </html>2、外边距 1、什么是外边距 围绕在元素边框周围的空白区域 作用： 1、控制元素与元素之间的距离 2、移动元素位置 2、属性 margin:四个方向的外边距 margin-方向:单边设置 margin-top:上外边距 margin-bottom:下外边距 margin-left:左外边距 margin-right:右外边距
取值： 1、px 像素 2、% 3、auto(自动) 4、负值3、取值-auto 左右方向设置为 auto 时，允许元素在其父元素中水平居中对齐，前提，必须设置该元素的宽度 4、取值-负值 移动元素，向着反方向移动 margin-left:-10px;向左移动10px margin-top:-10px;向上移动10px 5、margin 属性的取值数量 margin:value;四个方向外边距 margin:v1 v2;上下 左右 margin:v1 v2 v3;上 左右 下 margin:v1 v2 v3 v4;上右下左 ex: margin:0 auto;水平居中标准写法 6、页面中具备默认外边距的元素 h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd 通过 CSS Reset 的方式 重写默认外边距 7、特殊效果 1、外边距合并 当两个垂直外边距相遇时，它们将形成一个外边距 合并后的外边距的高度等于两个发生合并外边距高度重的较大者 2、外边距的溢出 在某种特殊场合下，给子元素设置外边距时，效果却作用在父元素的外边距效果上了。 特殊场合：父元素不设置边框时，为父元素中的第一个子元素设置上外边距时，或为最后一个子元素设置下外边距时 解决方案： 1、为父元素添加边框 有瑕疵，父元素高度会发生改变 2、为父元素添加内边距来取代子元素外边距 有瑕疵，影响元素的尺寸 3、块级元素，行内元素，行内块元素的上下外边距 上下外边距对行内元素 无效 上下外边距对行内块元素的影响是，整行元素都会受到影响 练习: 框模型外边距实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #d1{ width:200px; height:200px; background-color:red; /*上下左右外边距：10px*/ margin:10px; } #d2{ width:200px; height:200px; background-color:red; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body> </html>3、内边距 1、什么是内边距 内容区域与边框之间的空间 会扩大元素边框所占用的区域 2、属性 padding:四个方向内边距 padding-top: padding-bottom: padding-right: padding-left: 取值： 1、px 2、% 取值数量： padding:value;四个方向内边距 padding:v1 v2;上下 左右 padding:v1 v2 v3;上 左右 下 padding:v1 v2 v3 v4;上右下左 3、特殊影响 为行内元素设置上下内边距时，只会影响元素自身，并不会影响到其他元素 4、属性-box-sizing 1、作用 指定边框，内边距，内容区域的计算模式 默认：width和height只负责定义内容区域的尺寸，border，padding额外添加到元素上的 2、属性 & 值 属性：box-sizing 取值： 1、content-box 默认值，在元素的width和height之外绘制边框和内边距 2、border-box 边框和内边距会包含在width和height之中
练习： 框模型内边距实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #d1,#d2{ border:1px solid black; } #d3{ border:1px solid red; padding:10px; } #s1{ border:1px solid blue; padding:10px; } #d2{ margin-top:10px; } </style> </head> <body> <div id="d1"> <div id="d3">Hello</div> </div> <div id="d2"> <span id="s1">World</span> </div> </body> </html>3、背景属性 1、背景色 属性：background-color 取值： 任意合法颜色值 transparent 注意： 背景颜色会填充到元素的内容区域，内边距区域以及边框区域 2、背景图像 属性：background-image 取值：url(图像url) ex:background-image:url(a.jpg); 3、背景平铺 属性：background-repeat 取值： 1、repeat 默认值，垂直和水平方向都平铺 2、repeat-x 横向平铺 3、repeat-y 纵向平铺 4、no-repeat 不平铺，仅显示一次 4、背景图片尺寸 属性:background-size 取值: 1、value1 value2 具体数值，value1表示背景图像的宽度，value2表示背景图像的高度 2、value1% value2% 以元素的尺寸占比决定背景图的尺寸 3、cover 覆盖 把背景图扩展至足够的大(等比缩放)，直到背景图像完全覆盖到元素区域位置 4、contain 包含 将背景图像等比缩放，直到右边或下边碰到元素边缘为止 5、背景图片固定 属性：background-attachment 取值： 1、scroll 滚动,默认值 2、fixed 固定，将背景图保持在可视化区域内，不随着滚动条而发生变化 6、背景图片位置 属性：background-position 取值： 1、x y x ：背景图像水平偏移位置 取值为正，向右移动 取值为负，向左移动 y ：背景图像垂直偏移位置 取值为正，向下偏移 取值为负，向上偏移 2、x% y% 3、 x:left/center/right 替代 y:top/center/bottom 替代
CSS Sprites 将若干幅小图像拼合到一副大图像中，想看具体小图像的时候，配合着背景图已经背景图像位置的方式进行移动，显示
1、根据要看的图像，创建一个元素,该元素大小要与要看的图像大小一致。 2、通过 背景图像以及背景图像位置 移动背景图到 显示的元素中 7、背景属性-简写属性 background:color url() repeat attachment position;
注意：属性值可以省略，省略的话将采用默认值 background:red;练习： CSS Sprites实例：
<!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #d1,#d2{ border:1px solid black; } #d3{ border:1px solid red; padding:10px; } #s1{ border:1px solid blue; padding:10px; } #d2{ margin-top:10px; } </style> </head> <body> <div id="d1"> <div id="d3">Hello</div> </div> <div id="d2"> <span id="s1">World</span> </div> </body> </html> <!doctype html> <html> <head> <title>标题</title> <meta charset="utf-8"> <style> #jinghua{ /*1、创建元素大小*/ width:33px; height:18px; /*2、设置背景图像，已经背景图像位置*/ /*background-image:url(Images/iconlist_1.png); background-repeat:no-repeat; background-position:-243px -112px;*/ background:url(Images/iconlist_1.png) no-repeat -243px -112px; } </style> </head> <body> <!-- 显示 精华 --> <div id="jinghua"></div> </body> </html>小常提示请注意：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
小常提示请注意：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
