css border-image.html

最新推荐文章于 2023-03-01 11:40:35 发布

学无止境慢慢来

最新推荐文章于 2023-03-01 11:40:35 发布

阅读量124

点赞数

分类专栏： CSS

原文链接：https://www.runoob.com/cssref/css3-pr-border-image.html

版权

CSS 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css border-image</title>
    <style>
        /*参考：https://www.w3school.com.cn/cssref/pr_border-image.asp
        https://www.runoob.com/cssref/css3-pr-border-image.html
        知识点：
        border-image 属性是一个简写属性，用于设置以下属性：
        border-image-source border-image-slice border-image-width
        border-image-outset border-image-repeat
        如果省略值，会设置其默认值。
        提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
        border-image: source slice width outset repeat|initial|inherit;
        默认值：none 100% 1 0 stretch
        值                  描述
        border-image-source    用在边框的 图片路径。
        border-image-slice 图片边框 向内偏移。
        border-image-width 图片边框的 宽度。
        border-image-outset    用于指定边框图像区域 超出边框的量，在边框外部绘制 border-image-area 的量。
        border-image-repeat    用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

        border-image-slice: number|%|fill;
        注意: 此属性指定顶部，右，底部，左边缘的图像向内偏移，
        分为九个区域：四个角，四边和中间。
        图像中间部分将被丢弃（完全透明的处理），除非填写关键字。
        如果省略第四个数字/百分比，它和第二个相同的。
        如果也省略了第三个，它和第一个是相同的。
        如果也省略了第二个，它和第一个是相同的。
        值       说明
        number 数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）
        %      百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度
        fill   保留图像的中间部分

        border-image-width: number|%|auto;
        注意： border-image -width的4个值指定用于把border图像区域分为九个部分。
        他们代表上，右，底部，左，两侧向内距离。
        如果第四个值被省略，它和第二个是相同的。
        如果也省略了第三个，它和第一个是相同的。
        如果也省略了第二个，它和第一个是相同的。负值是不允许的。
        值      说明
        number 表示相应的border-width 的倍数
        %      边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
        auto   如果指定了，宽度是相应的image slice的内在宽度或高度

        border-image-outset: length|number;
        注意： border-image-outset用于指定在边框外部绘制 border-image-area 的量。
        包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。
        如果也省略了第三个，它和第一个是相同的。
        如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。
        值      描述
        length 设置边框图像与边框（border-image）的距离，默认为0。
        number 代表相应的 border-width 的倍数
        */
        div {
            border: 15px solid transparent;
            width: 376px;
            padding: 10px 20px;
        }

        #repeat {
            border-image-source: url(https://www.w3school.com.cn/i/border.png);
            border-image-slice: 30; /*图片密度、重复次数相关。*/
            border-image-width: 15px;
            border-image-outset: 0px;
            border-image-repeat:repeat;
        }

        #round {
            border-image: url(https://www.w3school.com.cn/i/border.png) 30 30 round;
            border-image: url(https://www.w3school.com.cn/i/border.png) 30 round;
        }

        #stretch {
            border-image: url(https://www.w3school.com.cn/i/border.png) 30 30 stretch;
            border-image: url(https://www.w3school.com.cn/i/border.png) 30 stretch;
        }
    </style>
</head>
<body>
<div id="repeat">border-image: url(https://www.w3school.com.cn/i/border.png) 30 30 repeat;</div>
<br>
<div id="round">border-image: url(https://www.w3school.com.cn/i/border.png) 30 30 round;</div>
<br>
<div id="stretch">border-image: url(https://www.w3school.com.cn/i/border.png) 30 30 stretch;</div>
<p>这是我们使用的图片：</p>
<img src="https://www.w3school.com.cn/i/border.png">
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>

效果图：

学无止境慢慢来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css border-image.html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>css border-image</title> <style> /*参考：https://www.w3school.com.cn/c...
复制链接

扫一扫