9：图片边框

liu1992452008

于 2017-07-18 17:14:25 发布

阅读量199

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/liu1992452008/article/details/75313514

版权

CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

***相应效果

***相关图片

***相关代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border: 15px solid transparent;
            width: 250px;
            padding: 10px 20px;
            margin: 20px;
        }
        
        .repeat {
            border-image: url(images/border.png) 30 30 repeat;
        }
        
        .round {
            border-image: url(images/border.png) 30 30 round;
        }
        
        .stretch {
            border-image: url(images/border.png) 30 30 stretch;
        }
    </style>
</head>

<body>
    <div class="repeat">这是重复方式，边角部分会进行裁剪</div>
    <div class="round">这是round方式，为了实现圆满会进行拉伸或者压缩</div>
    <div class="stretch">边框图片是拉伸形式，有多长拉多长</div>
</body>

</html>