vlambda博客
学习文章列表

《HTML权威指南5》CSS学习笔记(二)

3、边框和背景

3.1 应用边框样式

容器的边框常用的关键属性有三个:border-widthborder-styleborder-color

3.1.1 定义边框宽度、样式和颜色

  • border-color:边框的颜色

border-color的取值包括:十六进制颜色值、RGB颜色、RGBA颜色、HSL颜色、HSLA颜色、预定义/跨浏览器颜色名。

  • border-width:边框的宽度

border-width的取值包括:常规的CSS长度值、容器宽度的百分比、CSS3提供的默认快捷值,其中快捷值包括Thinmiddlethick,他们的大小是浏览器定义的并且依次增大。

  • border-style:边框的样式

boder-style可选值如下:

描述
none 没有边框
dashed 破折线边框
dotted 圆点线边框
double 双线式边框
groove 槽线式边框
inset 使元素内容具有内嵌效果的边框
outset 使元素内容具有外嵌效果的边框
ridge 脊线边框
solid 实线边框


dashed效果:

dotted效果:

《HTML权威指南5》CSS学习笔记(二)

double效果:

《HTML权威指南5》CSS学习笔记(二)

groove效果:

《HTML权威指南5》CSS学习笔记(二)

inset效果

《HTML权威指南5》CSS学习笔记(二)

outset效果

《HTML权威指南5》CSS学习笔记(二)

ridge效果:

《HTML权威指南5》CSS学习笔记(二)

solid效果:

《HTML权威指南5》CSS学习笔记(二)

3.1.2 定义一条边框的宽度、样式和颜色

以上内容介绍了应用边框三种属性的设置方法,需要注意的是,这里是使用的border-widthborder-styleborder-color,这些设置将会对应用的四条边框起作用,如果需要单独设置某条边框,可在border后面添加对应的值,其属性值与通用属性值一样,比如:

属性 说明
border-left-width 定义左侧边框的宽度
border-left-style 定义左侧边框的样式
border-left-color 定义左侧边框的颜色
border-right-width 定义右侧边框的宽度
border-right-style 定义右侧边框的样式
border-right-color 定义右侧边框的颜色
border-top-width 定义上侧边框的宽度
border-top-style 定义上边边框的样式
border-top-color 定义上边边框的宽度
border-bottom-width 定义下边边框的宽度
border-bottom-style 定义下边边框的样式
border-bottom-color 定义下边边框的颜色

3.1.3 使用简写方式定义边框样式

另外,为了方便编写边框样式,CSS3提供了简写border属性的方式,具体如下表:

属性 说明
border 设置所有边框的样式 <宽度> <样式> <颜色>
border-left 设置左边边框的样式 <宽度> <样式> <颜色>
border-right 设置右边边框的样式 <宽度> <样式> <颜色>
border-top 设置上边边框的样式 <宽度> <样式> <颜色>
border-bottom 设置下边边框的样式 <宽度> <样式> <颜色>

如果某个值忘了写,浏览器将会使用之前定义的值或者浏览器默认提供的值。

3.1.4 定义圆角边框

定义边框的圆角,可是使用radius属性,与上面一样,也可以单独设置某条边框的边框,如下表:

属性 说明
border-radius 为四条边统一设置圆角 一对长度值或者边框宽度、高度的百分数值
border-top-left-radius 为左上设置圆角 一对长度值或者边框宽度、高度的百分数值
border-top-right-radius 为右上设置圆角 一对长度值或者边框宽度、高度的百分数值
border-bottom-right-radius 为右下设置圆角 一对长度值或者边框宽度、高度的百分数值
border-bottom-left-radius 为左下设置圆角 一对长度值或者边框宽度、高度的百分数值

这里的一对值表示为圆角设置水平和垂直方向的半径值,如果只提供一个值,表示水平和垂直半径的值是一样的。

CSS3也提供了border-radius的简写形式:

  • border-radius: 15px \ 20px:表示四条边的圆角的水平半径为15px,垂直半径为20px

  • border-radius: 15px 10px 20px 5px \ 20px 15px 10px 1px:依次表示为边框设置左上、右上、右下、左下设置圆角,例如:左上圆角的水平半径为15px、垂直半径为20px

3.1.5 使用图像作为边框样式

除了使用border-style提供的9中样式外,还可以使用图像作为应用的边框。图像边框常用的属性有5个:

属性 说明
border-image-source 设置图像来源 non或者url(<图像地址>)
border-image-slice 设置切分图像的偏移 1~4个长度值或者百分数,受图像的宽度和高度影响
border-image-width 设置图像边框的宽度 1~4个长度值或者百分数或者auto
border-image-outset 设置边框图像想外扩展的部分 1~4个长度值或者百分数
border-image-repeat 设置图像填充边框区域的模式 stretch、repeat和round的一个或两个值
border-image 在一条声明中设置以上所有属性值 和单属性值一致

目前各大浏览器对于boder-image属性支持情况(从caniuse.com网站截取):


3.1.5.1 切分图像

切分图像是使用图像作为边框的关键步骤,浏览器会基于设置的border-image-slice的值来切分图像,具体的切分方法是:

  • 将图像横向切两刀、纵向切两刀,得到一个九宫格的效果

  • 九宫格的四个边角(左上、右上、右下、左下)称为“角边框图片”,它不会有任何的拉伸、平铺、重复等展示效果;每条边的图片(上、下、左、右)属于展示效果的作用区,存在拉伸、平铺、重复等效果,这是由border-image-repeat属性值来设定的;九宫格的中间的部分是镂空的

  • 切分图的大小是由border-image-slice的值确定的,第一个值表示距离图像顶部的大小、第二值表示距离图形右侧的大小、第三个值表示距离图像底部的大小、第四个值表示距离图像左侧的大小,如下图所示

3.1.5.2 控制切分图重复方式

如上一小节所说,border-image-repeat属性值控制着4条边的展示效果,其可用的属性值如下:

属性值 描述
stretch 拉伸切分图填满整个空间
repeat 平铺切分图铺满整个空间
round 在不截断切分图的情况下,平铺切分图并拉伸以填满整个空间
space 在不截断切分图的情况下,平铺切分图并在图片之前保留一定的间距填满整个空间

border-image-repeat属性值可以有一个值或两个值,一个值表示4条边使用同一种效果,两个值中的前一个表示水平边的效果,后一个值表示垂直边的效果。

3.2 设置元素背景

元素背景相关的属性信息如下:

属性 属性说明 属性值
background-color 设置元素背景颜色,总是在背景图像的下面 <颜色值>
background-image 设置元素背景图像,总是在背景颜色的上面;如果设置多个图像,后面的图像在前面的上面 none或者url(图像地址)
background-repeat 设置元素背景图像的重复方式 后面详细介绍
background-size 设置背景图像的尺寸 后面详细介绍
background-position 设置背景图像的位置 后面详细介绍
background-attachment 设置背景图像是否固定或随页面一起滚动 后面详细介绍
background-clip 设置背景图像裁剪方式 后面详细介绍
background-origin 设置背景图像绘制的起始位置 后面详细介绍
background 简写属性 后面详细介绍

3.2.1 background-repeat的属性值描述

属性值 说明
repeat-x 水平方向平铺图像,图像可能被截断
repeat-y 垂直方向平铺图像,图像可能被截断
repeat 水平和垂直方向同时平铺图像,图像可能被截断
space 水平或垂直方向平铺图像,图像之间有一定的间距,确保图像不会被截断
round 水平或垂直方向平铺图像,但调整图像的大小确保图像不会被截断
no-repeat 禁止平铺图像

3.2.2 设置图像大小

background-size控制图像的大小,其属性值可是长度值(如果有两个,分别表示图像的宽度和高度)、百分比和预定值,预定义值有:

  • contain

等比例缩放图像,确保图像始终在容器内部。浏览器判断图像的高度和宽度,选择其中最大值,然后与调整至于容器相应的高度或宽度大小,这个值确保图像始终在容器内部。

  • cover

等比例调整图像,使图像至少能够覆盖容器,但很有可能超出容器。浏览器选择图像的高度和宽度的最小值为基准,先让其匹配容器的相应的高度或宽度,对于剩下的一个值进行等比例的缩放,这种情况可能会溢出容器。

  • auto

默认值,图像以本身尺寸完全显示。

3.2.3 设置图像背景位置

background-position属性用来设置背景图像的位置,图像不平铺时该属性用的最多。其属性值可以使具体的长度值(background-position: 30px 40px),也可以是预定值:

属性值 描述
top 背景图像定位到容器顶部
bottom 背景图像定位到容器底部
right 背景图像定位到容器右侧
left 背景图像定位到容器左侧
center 背景图像定位到容器中间位置

属性值的第一个值控制水平位置,可以是leftrightcenter,或者指定的值,如:40px表示距离左侧40个像素;第二个位置用来控制垂直位置,可以是topbottomcenter,或者指定的值,如:30px表示距离顶部30个像素。

3.2.4 设置背景图像的附着方式

background-attachement为具有视窗的元素(比如:textareabody)设置背景图片的附着方式,用来控制当内容超出元素范围显示滚动条时,背景图片的附着效果。其属性值如下:

属性值 说明
fixed 背景固定到视图上,当内容滚动时背景图片不动
local 背景固定的内容上,当内容滚动时背景图片一起滚动
scroll 默认值,背景固定在元素上,不会跟随内容一起滚动

3.2.5 设置背景图像的开始位置和裁剪样式

background-origin控制着指定背景颜色和背景图像应用的位置;background-clip控制着背景颜色和图像的绘制区域。两者均可取以下3个值:

属性值 说明
border-box 在边框盒子内部绘制背景颜色和背景图像
padding-box 在内边距盒子内部绘制背景颜色和背景图像
content-box 在内容盒子内部绘制背景颜色和背景图像

示例:

p {
   background-origin: border-box;
   background-clip: content-box;
}

上面的示例会告诉浏览器,在边框盒子内部绘制背景,但是在会丢弃内容盒子之外的背景。

3.2.6 使用background简写属性

浏览器支持使用简写的background方式,其各个属性的位置为:

backgroud: <backgroud-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>

示例:

p {
   border: 10px double black;
   background: #000 top right no-repeat border-box content-box local url(banana.png)
}

上面的示例等同于:

p {
   border: 10px double black;
   background-color: #000;
   background-size: top right;
   background-repeat: no-repeat;
   background-origin: border-box;
   background-clip: border-box;
   background-attachment: local;
   background-image: url(banana.png);
}

3.3 创建盒子阴影

box-shadow属性可以用来为元素指定阴影,box-shadow的值的组成结构:box-shadow: hoffset voffset blur spread color inset,其中每个属性值的描述如下:

属性 描述
hoffset 阴影的水平偏移量,是一个长度值,正值表示向右偏移,负值表示向左偏移
voffset 阴影的垂直偏移量,是一个长度值,正值表示向下偏移,负值表示向上偏移
blur 可选值,指定模糊值,是一个长度值,值越大的盒子边界越模糊,默认值为0,表示边界清晰
spread 可选值,指定阴影的延伸半径,是一个长度值,正值表示阴影向盒子各个方向扩大,负值表示阴影沿相反方向缩小
color 可选值,设置阴影的颜色,如果省略,将会自行选择一个颜色
inset 可选值,将阴影设置为内部阴影(盒子内部)

需要注意的是,color属性如果没有值,浏览器可以自行应用标准颜色,这个标准颜色从哪里来,可能是某种适合用户当前系统或者浏览器主题的颜色。

示例:

div {
   height: 50px;
   width: 100px;
   box-shadow: 4px 5px 9px 2px gray;
}

3.4 设置轮廓

outline属性是设置应用轮廓的简写属性。轮廓和盒子边框的对比呢,一个是前者始终在后者的外面,另外一个,也是最重要的一个,边框属于页面但是轮廓不属于页面,因此它不会调整页面布局。轮廓的主要作用在于,它可以在短时间内抓住用户对于某个元素的注意力。常用的轮廓相关的属性有:

属性 说明
outlint-color 设置轮廓的颜色 <颜色>
outline-offset 设置轮廓的距离边框外边缘的偏移量 <长度值>
outline-style 设置轮廓样式 border-style属性值一样
outline-width 设置轮廓宽度 thin、medium、thick、<长度>
outline 轮廓的简写属性 <颜色> <样式> <宽度>

值得注意的是:outline的简写值仅包含outline-coloroutline-styleoutline-width。如果需要指定outline-offset的值,需要额外的设置。

示例:

textarea {
   outline-offset: 10px;
   outline: green solid 4px;
}