应用边框样式
边框基本设置
首先简单介绍一下使用边框最常用的三个基本属性:
属性 | 说明 | 值 |
---|---|---|
border-width | 设置边框的宽度 | 度量单位(em、px、cm等) |
border-color | 设置边框的颜色 | 英文单词、HEX、RGBa、HSLa |
border-style | 设置边框的样式 | 参考下方表格 |
CSS提供的边框样式比较丰富,下面我将通过表格来进行说明:
属性 | 说明 |
---|---|
none | 没有边框 |
dashed | 虚线边框 |
dotted | 点线边框 |
outset | 外浮雕边框 |
inset | 内浮雕边框 |
solid | 实现边框 |
double | 双实线边框 |
groove | 3D凹槽边框 |
ridge | 3D凸槽边框 |
你也可以单独为某一条边框设置样式,这需要用到特定的属性,如下所示:
属性 | 说明 | 值 |
---|---|---|
boder-top-width/style/color | 定义顶边 | 跟通用属性的值一样 |
border-bottom-width/style/color | 定义底边 | 跟通用属性的值一样 |
border-left-width/style/color | 定义左边 | 跟通用属性的值一样 |
border-right-width/style/color | 定义右边 | 跟通用属性的值一样 |
我们也可以不用分开设置样式、宽度和颜色,因为这样看起来太复杂了,我们可以使用简写属性boder一次搞定,下方列表描述了这些属性:
属性 | 说明 | 值 |
---|---|---|
border | 设置所有边的边框 | <宽度><样式><颜色> |
border-top/left/right/bottom | 设置一条边的边框 | <宽度><样式><颜色> |
<style type="text/css">
div {
border: 2px solid black;
}
section {
border-top: 5px dashed blue;
}
</style>
设置圆角边框
可以使用边框的radius属性创建圆角边框,下方通过表格说明:
属性 | 说明 | 值 |
---|---|---|
border-radius | 一次设置四个角的简写属性 | 度量单位px/百分值等 |
border-top/bottom/left/right-radius | 设置一个圆角 | 度量单位px/百分值等 |
设置元素的背景
首先列出一些背景属性:
属性 | 说明 |
---|---|
background-color | 设置元素的背景颜色,总是显示在背景图像下面 |
background-image | 设置元素的背景图像,如果指定一个以上的图像,则后面的图像绘制在前面的图像下面 |
background-repeat | 设置图像的重复样式 |
background-size | 设置背景图像的尺寸 |
background-position | 设置背景图像的位置 |
background-attachment | 设置元素中的图像是否固定或随页面一起滚动 |
background-clip | 设置背景图像裁剪方式 |
background-origin | 设置背景图像绘制的起始位置 |
background | 简写属性 |
设置背景颜色和图像
设置背景颜色和图像相对比较简单,这里就简单的通过代码给大家示范一下如何使用:
<style type="text/css">
div {
border: 2px solid black;
/*设置背景颜色*/
background-color: red;
/*设置背景图片*/
background-image: url(image.png);
}
</style>
设置背景重复 background-repeat
当一张背景图片宽或高小于其元素容器,或用“background-size”(后面会讲到)设置宽高小于元素容器的宽高时,背景图片默认会以“平铺”的方式排满整个元素的背景,而该属性正式用于控制图像重复排列方式的,它有以下值:
值 | 说明 |
---|---|
repeat | 水平和垂直方向同时平铺图像,图像可能被截断 |
repeat-x | 水平方向平铺图像,图像可能被截断 |
repeat-y | 垂直方向平铺图像,图像可能被截断 |
no-repeat | 禁止平铺图像 |
设置背景图像尺寸 background-size
该属性用于设置背景图片的大小,主要可以通过四种类型的单位设置:
值 | 说明 |
---|---|
像素值 | 可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值,第一个值表示背景图的宽度,第二个值表示背景图的高度,还可以通过设置宽度或高度的其中一个,将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。如:“240px 120px”、“180px auto”或“auto(相当于还原默认的大小)”。 |
百分比 | 用“百分比”作为值,结构和用“像素值”一致,也是两个值,第一个值是相对于元素宽度的百分比值,第二个值是相对于元素高度的百分比。如:“100% 80%”、“100% auto”或“auto 50%”。 |
contain | 等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合,背景图像始终包含在容器内 |
cover | 等比例缩放图像,是图像至少覆盖容易,有可能超出容器 |
auto | 默认值,图像以本身尺寸完全显示 |
设置背景图像位置 background-position
浏览器使用background-position属性设置背景图像的位置。图像不平铺的时候这个属性用得最多。使用这个属性主要分为两类实际情况:第一类情况就是元素的宽高大于背景图片时,这个时候是通过“0”或“正数值”去进行定位;第二类情况就是元素的宽高小于背景图片的宽高时,这个时候是通过“0”或“负数值”去进行定位(这是采用“CSS图片精灵(CSS Sprites)”技术来开发项目的时候必用的属性)。
方位英文单词:可以有“left”、“right”、“top”、“bottom”和“center”。用法如:“left top”(默认),设置背景图在元素内的“左上方”;“right bottom”,设置背景图在元素内的“右下方”;“center center”,设置背景图在元素的“中心”。
百分比单位:用法如:“0% 50%”,设置背景图在元素内“水平方向”的“左方”,垂直方向的“中心”;“50% 50%”,,设置背景图在元素内的“中心”;“100% 100%”,,设置背景图在元素内的“右下方”。
像素单位:背景图的“左上角”相对于元素“左上角”偏移的距离,如“10px 20px”,设置背景图“水平向右”偏移10像素,“垂直向下”偏移20像素。
这三种形式去设置背景图片的位置是可以“混搭”的,如:“left 100%”、“50% 70px”、“top 30px”等。不过从代码规范性的角度出发,并不推荐这种“混搭”的方式。
设置元素的背景附着方式 background-attachment
为具有视窗的元素应用背景时,可以指定背景附着内容的方式。textarea是常见的居右视窗的元素,可以自动添加滚动条以显示内容。另一个例子是body元素,如果其中的内容比浏览器的窗口长,可以为其设置滚动条,使用background-attachment属性可以控制背景的附着方式,下方表格中列出了该属性的可能取值:
值 | 说明 |
---|---|
fixed | 背景固定到视窗上,即内容滚动时背景不动 |
local | 背景附着在内容上,即背景随内容一起滚动 |
scroll | 背景固定到元素上,不会随内容一起滚动 |
设置背景图像的开始位置和裁剪样式
背景的起始点(origin)指定背景颜色和背景图像应用的位置。裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域。background-origin和background-clip属性控制着这些特性,两者都可以取以下三个值:
值 | 说明 |
---|---|
border-box | 在边框盒子内部绘制背景颜色和背景图像 |
padding-box | 在内边距盒子内部绘制背景颜色和背景图像 |
content-box | 在内容盒子内部绘制背景颜色和背景图像 |
创建盒子阴影
备受开发人员热切期待的一个CSS3特性是为元素的盒子添加阴影效果。这要通过box-shadow
属性来实现。box-shadow元素的值组成如下:
box:hoffset voffset blur spread color inset
每个值代表的意思请参考下方列表:
值 | 说明 |
---|---|
hoffset | 阴影的水平偏移量,是一个长度值,正值代表阴影向右偏移,负值代表阴影向左偏移 |
voffset | 阴影的垂直偏移量,是一个长度之,正值代表阴影位于元素盒子下方,负值代表阴影位于元素盒子上方 |
blur | (可选)指定模糊值,是一个长度值,值越大盒子的边界越模糊。默认值是0,边界清晰 |
spread | (可选)指定阴影的延伸半径,是一个长度值,正值代表阴影像盒子各个方向延伸扩大,负值代表阴影延相反方向缩小 |
color | (可选)设置阴影的颜色,如果省略,浏览器会自行选择一个颜色 |
inset | (可选)将外部阴影设置为内部阴影(内嵌到盒子中) |
代码示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style type="text/css">
div {
margin-top: 30px;
}
div span {
border:5px groove black;
padding: 10px;
margin-top: 20px;
box-shadow: 10px 7px 3px 2px gray;
}
</style>
</head>
<body>
<div>
<span>
犯我中华者虽远必诛
</span>
</div>
</body>
</html>
提示:我们可以再一条box-shadow声明中定义多个阴影,只需要用逗号分隔每条声明即可。
应用轮廓
轮廓对于边框来说是可选的。轮廓最有用的地方在于短时间抓住用户对某个元素的注意力,如必须按压的按钮或者数据输入中的错误。轮廓绘制在盒子边框的外面。边框和轮廓最大的区别是:轮廓不属于页面,因此应用轮廓不需要调整页面布局,下方列表中列出了与轮廓相关的属性:
属性 | 说明 | 值 |
---|---|---|
outline-color | 设置外围轮廓的颜色 | <颜色> |
outline-offset | 设置轮廓距离元素边框边缘的偏移量 | <长度> |
outline-style | 设置轮廓样式 | 跟border-style属性的值一样 |
outline-width | 设置轮廓的宽度 | thin、medium、thick、<长度> |
outline | 在一条声明中设置轮廓的简写属性 | <颜色><样式><宽度> |
代码示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style type="text/css">
input {
outline-color: blue;
outline-offset: 0px;
outline-style: dashed;
outline-width: 1px;
}
</style>
</head>
<body>
<form>
<input type="button" name="" value="确定">
</form>
</body>
</html>