社区首页 >专栏 >CSS3-边框和背景

CSS3-边框和背景

奋飛

发布于 2019-08-15 01:49:20

1.4K00

代码可运行

文章被收录于专栏：Super 前端Super 前端

运行总次数：0

代码可运行

下述内容主要讲述了《HTML5权威指南》第19章关于“使用边框和背景”。

CSS3中边框和样式得到了增强。例如：可以创建圆角边框，使用图像边框，为元素创建阴影。

一、应用边框样式

表基本边框属性

属性	说明	值
border-width	设置边框的宽度	<长度值>、<百分数>、Thin、medium、thick
border-style	设置绘制边框使用的样式	none、dashed、dotted、double、groove、inset、outset、ridge、solid
border-color	设置边框的颜色

效果：

可以对特定边进行定义：top、bottom、left、right

border-*-width
border-*-style
border-*-color

简便写法：

border: <宽度><样式><颜色>
border-*: <宽度><样式><颜色>

<style>
    p{
        height: 100px;
        width: 300px;
        border: 5px solid black;
    }
    /* 等价于 */
    p{
        height: 100px;
        width: 300px;
        border-width: 5px;
        border-style: solid;
        border-color: black;
    }
</style>

1. 创建圆角边框

可以使用边框的radius特性创建圆角边框。

属性	说明	值
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-botton-right-radius	设置一个圆角	一对长度值或百分数值，百分数跟边框盒子的宽度和高度相关
border-radius	一次设置四个角的简写属性	一对或四对长度值或百分值，由/字符分割

指定两个半径值即可定义一个圆角，第一个值指定水平曲线半径，第二个值指定垂直曲线半径。

<style>
    div {
        width: 300px;
        height: 100px;
        border: 5px solid red;

        border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    }
    /* 等价于 */
    div {
        width: 300px;
        height: 100px;
        border: 5px solid red;

        border-top-left-radius: 10px 10px;
        border-top-right-radius: 10px 10px;
        border-bottom-left-radius: 10px 10px;
        border-bottom-right-radius: 10px 10px;
    }
</style>

2. 将图像用做边框

属性	说明	值
border-image-source	设置图像来源
border-image-slice	设置切分图像的偏移
border-image-width	设置图像边框的宽度
border-image-outset	指定边框图像向外扩展的部分
border-image-repeat	设置图像填充边框区域的模式	stretch、repeat、round、space
border-image	所有值简写

示例：

p {
    -o-border-image: url(../images/border-image.png) 27 / 27px round repeat;
    border-image: url(../images/border-image.png) 27 / 27px round repeat;
}

说明：切分值和边框宽度值之间使用了/字符进行分割.可以为元素的每条边指定不同的宽度,不过此处只提供了一个值(27px),即四条边公用

二、设置元素的背景

属性	说明	值
background-color	设置元素的背景颜色，总是显示在背景图像下面
background-img	设置元素的背景图像，如果指定多个，后面的图像绘制在前面图像的下面
background-repeat	设置图像的重复样式	repeat-x、repeat-y、repeat、space、round、no-repeat
background-size	设置背景图像的尺寸	contain、cover、auto
background-position	设置背景图像的位置	top、left、right、bottom、center
background-attachment	设置元素在的图像是否固定或随页面一起滚动	fixed、local、scroll
background-clip	设置背景图像裁剪方式	border-box、padding-box、content-box
background-origin	设置背景图像绘制的起始位置	border-box、padding-box、content-box
background	简写属性

示例：

p{
    border: medium solid black;
    background-color: lightgrey;
    background-image: url(../images/border-image.png);
    background-size: 40px 40px;
    background-repeat: repeat-x;
}

简写：省略的值，浏览器会用默认值替代

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

三、创建盒子阴影

可以通过box-shadow属性实现阴影。

属性	说明
hoffset	阴影的水平偏移量
voffset	阴影的垂直偏移量
blur	（可选）模糊值
spread	（可选）阴影的延长半径
color	（可选）阴影的颜色
inset	（可选）将外部阴影设置为内部阴影（内嵌到盒子中）

示例：

p{
    border: 10px double black;
    height: 100px;
    box-shadow: 5px 4px 10px 2px gray inset;
}

四、应用轮廓

轮廓对于边框是可选的。轮廓有用的地方在于短时间抓住用户对某个元素的注意力，如必须按压的按钮或是数据输入中的错误。边框和轮廓最大的区别是：轮廓不属于页面，因此应用轮廓不需要调整页面布局。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮廓</title>
    <style>
        p{
            width: 30%;
            padding: 5px;
            border: medium double black;
            background-color: lightgrey;
            margin: 2px;
            float: left;
        }
        .outline{
            outline: thick solid red;
        }
    </style>
</head>
<body>
    <p>http://blog.csdn.net/ligang2585116</p>
    <p class="outline">http://blog.csdn.net/ligang2585116</p>
    <p>http://blog.csdn.net/ligang2585116</p>
    <p>http://blog.csdn.net/ligang2585116</p>
</body>
</html>