HTML5基础加强css样式篇（css属性border详解：图片边框border-image-slice，border-image-repeat,border-image-width（二））（三十四）

最新推荐文章于 2024-07-26 08:00:00 发布

咸鸭蛋炒饭

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量1.8k

点赞数 2

分类专栏： HTML5基础篇文章标签：经验 html5 css 函数图片

本文链接：https://blog.csdn.net/u010853130/article/details/69389518

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.图片边框：可以使用图片制作边框

先通过四根线把图片分成九份，中间一份为内容区域；其他分别对应边框的对应部分；

分割线属性： border-image-slice

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;

            /*使用图片边框，必须为元素设置边框宽度和样式*/
            border: 20px solid;

            /*引入一张图片*/
            border-image-source: url("img/border.png");
            /*默认对四个角填充这个图片*/
            border-image-slice: fill;
            border-image-slice: 26;
            /*切割图片的顺序 上，右，下，左，数字表示基于图片边框的切割位置图片高度78px*/
            border-image-slice: 52 26 26 26;
            border-image-slice: 52 52 26 26;

            border-image-slice: 52 26 13;

        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

依次四个效果为：

①②③④

2.边框拉伸： border-image-repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;

            /*使用图片边框，必须为元素设置边框宽度和样式*/
            border: 20px solid;

            /*引入一张图片*/
            border-image-source: url("img/border.png");
            /*设置图片的切割方式*/
            border-image-slice: 26;
            /*默认边框被拉伸*/
            border-image-repeat: stretch;
            /*平铺：保证图片的完整性*/
            border-image-repeat: round;
            /*平铺：不保证图片的完整性*/
            border-image-repeat: repeat;



        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

效果如下：

3.图片边框宽度：border-image-width修改宽度不改变元素本身大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;

            /*使用图片边框，必须为元素设置边框宽度和样式*/
            border: 1px solid;

            /*引入一张图片*/
            border-image-source: url("img/border.png");
            /*设置图片的切割方式*/
            border-image-slice: 26;
            /*默认边框被拉伸*/
            border-image-repeat: stretch;
            /*平铺：保证图片的完整性*/
            border-image-repeat: round;
            /*平铺：不保证图片的完整性*/
            border-image-repeat: repeat;

            /*设置图片边框的宽度 --- 不会改变元素大小*/
            border-image-width: 20px;



        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>
<span>Hello</span>

<script type="text/javascript">
</script>
</body>
</html>

效果图如下：

4.向元素外显示图片边框：border-image-outset：不影响其他元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;

            /*使用图片边框，必须为元素设置边框宽度和样式*/
            border: 1px solid;

            /*引入一张图片*/
            border-image-source: url("img/border.png");
            /*设置图片的切割方式*/
            border-image-slice: 26;
            /*默认边框被拉伸*/
            border-image-repeat: stretch;
            /*平铺：保证图片的完整性*/
            border-image-repeat: round;
            /*平铺：不保证图片的完整性*/
            border-image-repeat: repeat;

            /*设置图片边框的宽度 --- 不会改变元素大小*/
            border-image-width: 20px;

            /*向元素外显示图片边框*/
            border-image-outset: 50px 40px;



        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>
<span>Hello</span>

<script type="text/javascript">
</script>
</body>
</html>