CSS3-边框和背景

下述内容主要讲述了《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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券