CSS3 - 边框图片

作者: Hyso | 来源:发表于2019-03-11 12:06 被阅读0次

一篇文章带你了解CSS3图片边框
一篇文章带你了解CSS3图片边框
好程序员web前端培训分享CSS3 边框
CSS3-边框属性
css之border
CSS3 border-image介绍
CSS3 边框
CSS3边框
css3学习第一天
web前端面试提问总结：

border-image-source 属于设置指定图片为元素边框。
border-image-slice 属性设置图片从上往下、从右往左，从下往上，从左往右的偏移，不带单位。
boreder-image-repeat 属性设置当边框图片大小比元素大小小时，如何填充的平铺方式。默认为拉伸（stretch），还可设置为：平铺（repeat）、对图像进行缩放以适应区域（round）。

代码示例

当只设置 border-image 属性时，将把元素的四个角设置为图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 328px;
            height: 273px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            border-image-source: url(2.jpg);
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

运行结果

已放大至200%

上图中，元素四个角上的小黑点其实就是设置的边框图片。若想把图片设置到整个边框上，则还需要设置 border-image-slice 属性，将图片切成一个九宫格。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 328px;
            height: 273px;
            margin: 100px 100px;
            border: 1px solid #CCCCCC;
            border-image-source: url(2.jpg);
            border-image-slice: 42 26 42 26;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

代码分析

border-image-slice: 42 26 42 26;

从图片上边往下移动42像素
从图片右边往左移动26像素
从图片下边往上移动42像素
从图片左边往右移动26像素

运行结果

已放大至200%

由于在代码中将图片边框设置成了1px，因此无法看出图片边框的效果，所以需将元素的上右下左四个边框设置为 border-image-slice 属性的四个值，并上下左右一一对应。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 328px;
            height: 273px;
            margin: 100px 100px;
            border-top: 42px solid #CCCCCC;
            border-right: 26px solid #CCCCCC;
            border-bottom: 42px solid #CCCCCC;
            border-left: 26px solid #CCCCCC;
            border-image-source: url(2.jpg);
            border-image-slice: 42 26 42 26;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>