CSS 枠線のアウトラインshadow_html/css_WEB-ITnose

概要

ボーダーはボックスモデルの記事と一緒に導入する必要がありますが、記事が長くなるのを避け、この記事ではアウトラインとシャドウと一緒に紹介します。

ボーダー、アウトライン、シャドウが一緒に導入されている理由は、以下の図を見ると理解できます:

アウトライン (アウトライン) は、要素のエッジの周囲に位置する、要素の周囲に描かれた線です。要素の役割を強調できる境界線。

Border (ボーダー) は、要素のコンテンツとパディングを囲む 1 つ以上の線です。

Shadow (box-shadow) は CSS 3 の新しい属性で、要素ボックスに影を追加するために使用されます。

3 つは単独で存在することも、同時に存在することもできます。以下に個別に簡単に紹介します。

border border

HTML 要素には 4 つのボーダーがあり、各ボーダーには 3 つの側面があります:

width、style、および color。

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

border上のボーダー右のボーダー下のボーダー左のボーダーボーダーボーダートップボーダー右ボーダー下ボーダー左border-widthborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-styleborder-top-styleborder-右スタイルボーダー下スタイルボーダー左スタイルボーダーカラーボーダー上カラーボーダー右カラーボーダー下カラーボーダー左-color上記の表は、覚えやすいように境界線のプロパティをグループ化しています。ここでは 1 つのグループ (最初の列) のみを紹介します。

width

境界線の幅には 2 つのオプションの値があり、1 つは 2px や 0.1em などの長さの値を指定するもので、もう 1 つは Thin と Medium (デフォルト値) の 3 つのキーワードのいずれかを使用するものです。そして厚い。

注: CSS は 3 つのキーワードの特定の幅を定義していないため、あるユーザー エージェントは、thin、medium、thick をそれぞれ 5px、3px、2px に設定し、別のユーザー エージェントは 3px、2px に設定する可能性があります。それぞれと1px。 うわー

ボーダーには4つの方向があるため、border-widthには4つの値が入ります。一部が省略された場合も、値のコピーの原則に従います。

p {border-style: solid; border-width: 5px;}p {border-style: solid; border-width: thick;}

他の特定の方向の境界線の幅 (border-top-width、border-left-width など) には 1 つの値のみを入力できます。

スタイル

スタイルはボーダーの最も重要な側面です

。なぜなら、スタイルがなければボーダーも存在しないからです。つまり、幅と色を持たせることはできませんが、スタイルを持たないことはできません。 、スタイルのデフォルトは none です。 CSS では 10 個の境界線スタイルが定義されています。

値なしhidden点線dashedsoliddoublegrooveリッジinsetアウトセット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 元素进行测试

<div class="demo"></div>

相应样式

div.demo {    width:150px;    height:80px;    margin:50px auto;    border-style:solid;    border-width:20px;    border-image:url('border.png') 27 fill/27px/30px repeat;}

得到下面的样式

上例我们使用了border-image简写属性，其等价于下面的拆写属性：

border-image-source: url('border.png');border-image-slice: 27 fill;border-image-width: 27px;border-image-outset: 30px;border-image-repeat: repeat;

下面将对拆分属性及其值进行概要介绍。

border-image-source

这个很好理解，用来指定使用的图像。

border-image-slice

这个属性用来控制图像的切分。给定一个边框图像都会经过四次切分，你可以形象的按下图理解其切分流程。

经过四次切分后，得到9个区域（俗称“九宫格”）

border-image-slice 属性及值就是控制切分的偏移量的，类似border-width,它也有四个方位，并且遵循 值复制 规则，不同的是：截取的尺寸不需要单位，尺寸后可以添加fill关键字。

border-image-slice: 27; /*等价于 27 27 27 27*/border-image-slice: 27 20 fill; /*等价于 27 20 27 20 fill*/border-image-slice: 27 20 22 fill; /*等价于 27 20 22 20 fill*/

关键字fill标示中间区域将出现（出现归出现，至于能否看见，要看你截取的中间区域部分是否有可见图像），如下图：

border-image-width

边框图像宽度属性用来设置边框图像的宽度，边框图像宽度和边框宽度不是一码事，但有部分关联。

如果没有边框图像宽度定义，则默认边框图像宽度等于边框宽度，如果有边框图像宽度定义，则以边框图像宽度为准。

下图为没有定义边框图像宽度的情形，边框图像宽度等于边框宽度。

下图为设置了边框图像宽度的情形：

边框图像宽度大于边框宽度，图像向边框内溢出。

边框图像宽度也类似与边框宽度的定义，也是四个方位值，也遵循值复制规则。这个需要带单位哟。

border-image-outset

此属性用来设置边框图像向边框外偏移的量。

在上面的图中我们看到图像向边框内溢出了，如果担心向内溢出遮挡内容，我们可以通过此属性让其向外溢出一定尺寸。

border-image-outset: 30px 10px;

此属性的值设置也是四个方位，同样遵循值复制规则。

border-image-repeat

此属性控制着边框图像复制延伸的方式。有三个值可选：

stretch

拉伸图像来填充区域，比较好理解。默认属性值。

repeat

平铺（重复）图像来填充区域，从中间向两边复制。

round

类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

使用 round 最明显的好处是保证截取区域的完整性，而不像 repeat 会出现一半的情况，round 可能会进行少量的缩放。

下图为 上下 round 左右 repeat 可以对比一下区别。

另外，此属性虽说也有四个方位，但最多只能设置两个值：上下一致，左右一致。

border-image-repeat: round repeat;

border-image

边框图像的简写属性，可以将上述具体属性集中到此属性中，知道其语法格式即可，上面已经有过例子了。

border-image: border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;

圆角 radius

CSS 3 中新增了边框圆角的样式。

圆角相对比较简单，只有一个简写属性（border-radius）和四个具体方位属性，对于圆角来说，四个方位不再是上下左右了，而是：左上角（border-top-left-radius），右上角（border-top-right-radius），右下角（border-bottom-right-radius），左下角（border-bottom-left-radius）。属性值同样遵循 值复制 规则。

border-radius: 15px; /*等价于 15px 15px 15px 15px*/border-radius: 10% 10px; /*等价于 10% 10px 10% 10px*/

由于每个角都涉及两个方位（如：左上，关联 top 和 left），所以每个角可以设置两个值分别对应角上的两个方位，两个值使用 / 分隔，前面的表示上下的值，后面的表示左右的值。如果两个值相同，只写一个即可。

border-top-left-radius: 15px/15px; /*等价于 15px*/

通过下图你会对圆角有更加形象的认识。

轮廓 outline

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

注释：轮廓线不会占据空间。

轮廓的使用同边框，但没有边框那么复杂。轮廓只有：outline（简写属性，集中样式，尺寸，颜色的设置）,outline-style,outline-width,outline-color,4个属性可选，没有像边框似的对四个方位的具体设置相关的属性。

由于其使用及相应的属性值跟边框相同，故不再赘述。

阴影 box-shadow

box-shadow 阴影属性用来向框添加一个或多个阴影。

div {    box-shadow: 10px 10px 5px #888888;}

语法

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

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

説明
境界線を定義しません。
は、何もないのと同じです。
点線の境界線を定義します。
破線を定義します。
実線を定義します。
二重線を定義します。二重線の幅は、border-width の値と同じです。
3D 溝の境界線を定義します。
3D リッジの境界線を定義します。
3D はめ込み枠を定義します。
3D アウトセット境界線を定義します。
境界線のスタイルを親要素から継承することを指定します。

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

水平和垂直阴影位置是必选项，其值可以为负值。

画过素描的同学会很容易理解阴影（没画过的也很容易理解的）。

阴影跟光源有关，光源的位置不同，阴影也不同，光源的数量多少也决定着阴影的效果，物体的形状也影响阴影。

想象上图是一个桶，所成的阴影是我们从桶的上面去看，光线方向大致在桶的左上方所致。

代码实现为：

div {    width:100px;    height:100px;    margin: 100px auto;    background-color:#ff8888;    border:1px solid #000;    border-radius: 50%;    box-shadow: 10px 10px 5px #888888,        10px 10px 5px #888 inset;}

小结

边框和轮廓都是由样式，宽度和颜色进行定义，还可以给边框添加圆角，使其更加美观，阴影的使用可以使元素更加符合生活场景。