CSS：设置边框和背景

最新推荐文章于 2024-08-24 10:33:39 发布

李鴻耀同學

最新推荐文章于 2024-08-24 10:33:39 发布

阅读量2.1w

点赞数 12

分类专栏： CSS 文章标签： css 边框背景阴影

本文链接：https://blog.csdn.net/Hierarch_Lee/article/details/52668754

版权

CSS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

应用边框样式

边框基本设置

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

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