CSS：设置边框和背景

来源：互联网发布：淘宝店铺设置地址无效编辑：程序博客网时间：2024/05/22 12:39

应用边框样式

边框基本设置

首先简单介绍一下使用边框最常用的三个基本属性：

属性说明值 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>

这里写图片描述

1 0