CSS边框轮廓阴影_html/css_WEB-ITnose

概览

边框本应该在盒模型一文中一并介绍，只因为避免篇幅较长特独立此文与轮廓和阴影一并介绍。

之所以将边框，轮廓和阴影一并介绍，看下图就明白了：

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

边框 (border) 是围绕元素内容和内边距的一条或多条线。

阴影（box-shadow）是CSS 3新增的属性，用来向元素框添加阴影。

三者可以单独存在，也可以同时存在。下面将分开对其进行简单介绍。

边框 border

HTML 元素的边框有四个，每个边框有 3 个方面：宽度、样式、以及颜色。

/* border: 宽度 样式 颜色; */border: 1px solid red;/* 等价于 */border-width: 1px;border-style: solid;border-color: red;

边框上边框右边框下边框左边框 border border-top border-right border-bottom border-left border-width border-top-width border-right-width border-bottom-width border-left-width border-style border-top-style border-right-style border-bottom-style border-left-style border-color border-top-color border-right-color border-bottom-color border-left-color

上表对边框的属性进行了分组以方便记忆。现仅对其中一组（第一列吧）进行介绍。

宽度 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;}

由于边框有四个方位，所以border-width有四个值可填，如若部分省略，同样遵循值复制原则。

p {border-style: solid; border-width: 5px;} /* 等价于 5px 5px 5px 5px */p {border-style: solid; border-width: 5px 3px;} /* 等价于 5px 3px 5px 3px */p {border-style: solid; border-width: 5px 3px 2px;} /* 等价于 5px 3px 2px 3px */

其他具体方位边框宽度（border-top-width,border-left-width等）只能填一个值。

样式 style

样式是边框最重要的一个方面，因为如果没有样式，就没有边框，换句话就是说：宽度和颜色都可以没有，但不能没有样式，样式默认为 none.

CSS 中定义了十种边框样式。

值描述 none 定义无边框。 hidden 与 none 相同。 dotted 定义点状边框。 dashed 定义虚线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。 ridge 定义 3D 垄状边框。 inset 定义 3D inset 边框。 outset 定义 3D outset 边框。 inherit 规定应该从父元素继承边框样式。

还是看一下效果图吧

和宽度一样，样式也可以分别作用在四个方位，并且遵循着相同的值复制规则。

border-style: dotted solid double dashed; border-style: dotted solid double;border-style: dotted solid;border-style: dotted;

颜色 color

设置边框颜色非常简单。

可以使用任何类型的颜色值，例如可以是命名颜色（red,blue等），也可以是十六进制（#ff0000）和 RGB 值：

p {    border-style: solid;    border-color: blue rgb(25%,35%,45%) #909090 red;}

除了上面的三种值可选外，还有一个 transparent 透明边框可选，使用边框就是为了给元素划清界线，所以，你懂的。

另外，当我们不指定边框颜色的时候，只指定边框样式，边框也是有颜色和宽度的。它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。

注意：在 IE7 之前，没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

CSS 3 中对边框进行了丰富，增加了 image 和 radius 两个属性。

图像 image

边框图像稍微有点复杂，先看一个例子来体会其简单用法：

使用的图像尺寸为: 81 x 81px

对一个 div 元素进行测试

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113719

更新时间：2022-11-17 阅读：33次