CSS:设置边框和背景

应用边框样式

边框基本设置

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

属性 说明
border-width 设置边框的宽度 度量单位(em、px、cm等)
border-color 设置边框的颜色 英文单词、HEX、RGBa、HSLa
border-style 设置边框的样式 参考下方表格

CSS提供的边框样式比较丰富,下面我将通过表格来进行说明:

属性 说明
none 没有边框
dashed 虚线边框
dotted 点线边框
outset 外浮雕边框
inset 内浮雕边框
solid 实现边框
double 双实线边框
groove 3D凹槽边框
ridge 3D凸槽边框

CSS:设置边框和背景_第1张图片

你也可以单独为某一条边框设置样式,这需要用到特定的属性,如下所示:

属性 说明
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 在内容盒子内部绘制背景颜色和背景图像

CSS:设置边框和背景_第2张图片

创建盒子阴影

备受开发人员热切期待的一个CSS3特性是为元素的盒子添加阴影效果。这要通过box-shadow属性来实现。box-shadow元素的值组成如下:

box:hoffset voffset blur spread color inset

每个值代表的意思请参考下方列表:

说明
hoffset 阴影的水平偏移量,是一个长度值,正值代表阴影向右偏移,负值代表阴影向左偏移
voffset 阴影的垂直偏移量,是一个长度之,正值代表阴影位于元素盒子下方,负值代表阴影位于元素盒子上方
blur (可选)指定模糊值,是一个长度值,值越大盒子的边界越模糊。默认值是0,边界清晰
spread (可选)指定阴影的延伸半径,是一个长度值,正值代表阴影像盒子各个方向延伸扩大,负值代表阴影延相反方向缩小
color (可选)设置阴影的颜色,如果省略,浏览器会自行选择一个颜色
inset (可选)将外部阴影设置为内部阴影(内嵌到盒子中)

代码示例:

 
 <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 在一条声明中设置轮廓的简写属性 <颜色><样式><宽度>

代码示例:

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

这里写图片描述

你可能感兴趣的:(CSS)