css学习笔记-border-image

最新推荐文章于 2025-03-25 09:45:00 发布

Embed攻城狮

最新推荐文章于 2025-03-25 09:45:00 发布

阅读量445

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： css3 css

本文链接：https://blog.youkuaiyun.com/tjzhuorui/article/details/73527991

前端开发专栏收录该内容

12 篇文章

订阅专栏

本文通过一个实战案例介绍如何使用CSS3中的border-image属性来为元素设置边框图像，并解决实际应用过程中遇到的问题。

border-image据说是css3的一员大将。这个例子是从w3c school上学习到的(http://www.w3school.com.cn/cssref/pr_border-image.asp)

先上一个例子，我想达到如下的展示效果：

重点是在边框，边框的图形如下：

然后是代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-image测试</title>
    <style>
        div{
            margin-left: 30px;
            margin-top:30px;
            font-size: 30px;
            font-weight: bold;
            padding: 10px;
            text-align: center;

            border: 15px solid black;
            /*-webkit-border-image: url(border.png) 30 30 round;*/
            /*-moz-border-image: url(border.png) 30 30 round;*/
            /*-o-border-image: url(border.png) 30 30 round;*/
            border-image: round url(border.png) 30 30 30 30;
        }
    </style>
</head>
<body>
<div>hello world,border-image.</div>
</body>
</html>

笔者在写这个例子的时候碰到一个问题，就是无论怎么弄，边框图片不显示，最后发现其实是因为没有