资讯专栏INFORMATION COLUMN

CSS 边框 轮廓 阴影

姘存按 / 1716人阅读

摘要:概览边框本应该在盒模型一文中一并介绍,只因为避免篇幅较长特独立此文与轮廓和阴影一并介绍。之所以将边框,轮廓和阴影一并介绍,看下图就明白了轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。水平阴影的位置。阴影扩散的尺寸。

概览

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

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

轮廓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

边框的宽度有两种值可选,一种是指定长度值,比如 2px0.1em,另一种是使用 3 个关键字之一,它们分别是 thinmedium(默认值) 和 thick

注释:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thinmediumthick 分别设置为等于 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 中对边框进行了丰富,增加了 imageradius 两个属性。

图像 image

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

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

对一个 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。

描述
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;
}
小结

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111171.html

相关文章

  • CSS揭秘之多重边框

    摘要:多重边框的两种实现方案以由逗号分隔的列表来描述一个或多个阴影效果。轮廓与边框在以下几个方面存在不同轮廓不占据空间,它们被描绘于内容之上轮廓可以是非矩形的。是元素的轮廓,悬浮在元素边框之上。也就是说,它们之间的颜色会继承父元素的背景色。 多重边框的两种实现方案: border-shadow outline Mutiple border ...

    liuyix 评论0 收藏0
  • CSS3 新特性

    摘要:语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影,向右偏移,向下偏移,模糊半径,阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准,并且完全向后兼容,不过目前W3C 仍然在对 CSS3 规范进行开发,虽然标准的规范还没有正式发布,但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性,模糊了之前只...

    justjavac 评论0 收藏0
  • CSS3学习笔记

    摘要:在动画过程中,您能够多次改变这套样式。以百分比来规定改变发生的时间,或者通过关键词和,等价于和。为了获得最佳的浏览器支持,您应该始终定义和选择器。注释请使用动画属性来控制动画的外观,同时将动画与选择器绑定。CSS3 被划分为模块 其中最重要的 CSS3 新增实用模块包括: 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框:   用于创建圆角 border...

    wenshi11019 评论0 收藏0
  • 前端知识点总结——CSS

    摘要:父元素没有上边框为子元素设置上外边距时在中嵌套一个子元素设置其尺寸为,并设置其背景颜色设置的上外边距为观察其结果。 前端知识点总结——CSS 1.CSS的概述 1.什么是CSS? CSS:Cascading Style Sheets层叠样式表,级联样式表(简称:样式表) 2.作用 设置HTML网页元素的样式 3.HTML与CSS的关系 HTML:负责内容的展示 CSS:负责内容(元素)...

    nicercode 评论0 收藏0
  • 哪些你知道或不知道的css,在这里或许都齐全

    摘要:简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为,此时阴影与元素同样大。如果没有指定,则由浏览器决定通常是的值,不过目前取透明。首先,我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅,告诉我要注重基础,底层实现原理。才能在日新月异的技术行业站住脚跟,以不变应万变,万丈高楼平地起,所以我们应该不断的去学习,去交流。...

    Jackwoo 评论0 收藏0

发表评论

0条评论

姘存按

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<