CSS3 边框

前言

  • 用 CSS3,可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。
属性 描述 CSS 备注 🔗
border 简写属性,用于把针对四个边的属性设置在一个声明 1 🔗
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式 1 🔗
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度 1 🔗
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色 1 🔗
border-top 简写属性,用于把上边框的所有属性设置到一个声明中 1 🔗
border-top-style 设置元素的上边框的样式 1 🔗
border-top-color 设置元素的上边框的颜色 1 🔗
border-top-width 设置元素的上边框的宽度 1 🔗
border-right 简写属性,用于把右边框的所有属性设置到一个声明中 1 🔗
border-right-style 设置元素的右边框的样式 1 🔗
border-right-color 设置元素的右边框的颜色 1 🔗
border-right-width 设置元素的右边框的宽度 1 🔗
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中 1 🔗
border-bottom-style 设置元素的下边框的样式 1 🔗
border-bottom-color 设置元素的下边框的颜色 1 🔗
border-bottom-width 设置元素的下边框的宽度 1 🔗
border-left 简写属性,用于把左边框的所有属性设置到一个声明中 1 🔗
border-left-style 设置元素的左边框的样式 1 🔗
border-left-color 设置元素的左边框的颜色 1 🔗
border-left-width 设置元素的左边框的宽度 1 🔗
border-radius 设置或检索对象使用圆角边框 3 🔗
border-top-left-radius 定义左上角边框的形状 3 🔗
border-top-right-radius 定义右上角边框的形状 3 🔗
border-bottom-left-radius 设置或检索对象的左下角圆角边框。提供 2 个参数,2 个参数以空格分隔,每个参数允许设置1个参数值,
第 1 个参数表示水平半径,第 2 个参数表示垂直半径,如第 2 个参数省略,则默认等于第 1 个参数
3 🔗
border-bottom-right-radius 设置或检索对象的右下角圆角边框 3 🔗
border-image 设置或检索对象的边框样式使用图像来填充 3 🔗
border-image-outset 规定边框图像超过边框的量 3 🔗
border-image-repeat 规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded) 3 🔗
border-image-slice 规定图像边框的向内偏移 3 🔗
border-image-source 规定要使用的图像,代替 border-style 属性中设置的边框样式 3 🔗
border-image-width 规定图像边框的宽度 3 🔗
box-shadow 附加一个或多个下拉框的阴影 3 🔗

1、边界图片

  • 有了 CSS3 的 border-image 属性,可以使用图像创建一个边框。border-image 属性允许你指定一个图片作为边框。

  • 注意: Internet Explorer 不支持 border-image 属性。

属性 描述 CSS 备注 🔗
border-image 设置所有边框图像的速记属性 3 🔗
  • 属性值
描述
border-image-source 用于指定要用于绘制边框的图像的位置
border-image-slice 图像边界向内偏移
border-image-width 图像边界的宽度
border-image-outset 用于指定在边框外部绘制 border-image-area 的量
border-image-repeat 用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)
  • 属性值
source 值 描述
none 没有图像被使用
image 边框使用图像的路径
slice 值 描述
number 数字表示图像的像素(位图图像)或向量的坐标(如果图像是矢量图像)
% 百分比图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度
fill 保留图像的中间部分
width 值 描述
number 表示相应的 border-width 的倍数
% 边界图像区域的大小:横向偏移的宽度的面积,垂直偏移的高度的面积
auto 如果指定了,宽度是相应的 image slice 的内在宽度或高度
outset 值 描述
length 设置边框图像与边框(border-image)的距离,默认为 0
number 代表相应的 border-width 的倍数
repeat 值 描述
stretch 拉伸,默认值。拉伸图像来填充区域
repeat 重复,平铺(repeated)图像来填充区域
round 铺满,类似 repeat 值。如果无法完整平铺所有图像,则对图像进行缩放以适应区域
space 类似 repeat 值。如果无法完整平铺所有图像,扩展空间会分布在图像周围
initial 将此属性设置为默认值
inherit 从父元素中继承该属性
  • 在 div 中使用创建边框的图片。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
    div {
    border: 15px solid transparent;
    width: 300px;
    padding: 10px 20px;
    }
    #round {
    border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 round;
    -o-border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 round; /* Opera */
    -webkit-border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 round; /* Safari 5 and older */
    }
    #stretch {
    border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 stretch;
    -o-border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 stretch; /* Opera */
    -webkit-border-image: url(https://demo.qianchia.com/media/image/demo18.png) 30 30 stretch; /* Safari 5 and older */
    }
    </style>
    1
    2
    <div id="round">这里,图像平铺(重复)来填充该区域。</div>
    <div id="stretch">这里,图像被拉伸以填充该区域。</div>
  • 效果


    这里,图像平铺(重复)来填充该区域。

    这里,图像被拉伸以填充该区域。

2、盒阴影

  • CSS3 中的 box-shadow 属性被用来添加阴影。
属性 描述 CSS 备注 🔗
box-shadow 附加一个或多个下拉框的阴影 3 🔗
  • 属性值
描述
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    div {
    width: 300px;
    height: 100px;
    background-color: yellow;

    box-shadow: 10px 10px 5px #888888;
    }
    </style>
    1
    <div></div>
  • 效果

文章目录
  1. 1. 前言
  2. 2. 1、边界图片
  3. 3. 2、盒阴影
隐藏目录