边框图片border-image

一、定义：

在内容变化的容器里使用，边框自动填充，由于浏览器的兼容问题，没有广泛使用
border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。例如：border-image：url（“1.png”） 167/20px round

二、用法

①border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。如果值是"none"，或者，如果无法显示图像，边框样式会被使用。

②border-image -slice属性指定图像的边界向内偏移。此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。值默认的单位是px，不能使用小数

③border-image -width属性指定图像边界的宽度。

④border-image-outset用于指定在边框外部绘制 border-image-area 的量，设置边框图像与边框（border-image）的距离，默认为0

⑤ border-image-repeat 属性用于图像边界是否应重复（repeated：从边框的中间向两侧平铺，但不完整）、拉伸（stretched：拉伸显示在边框内，会变形）或铺满（rounded：完整的自适应显示在边框内，等比缩放，不会变形）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框图片</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            float: left;
            border: 20px solid #000;/* 必须先设置 */
            border-image: url("border.png") 26/20px stretch;
        }
        .box2{
            width: 400px;
            height: 400px;
            float: left;
            border: 20px solid #000;/* 必须先设置 */
            border-image: url("border.png") 26/20px round;
        }
        .box3{
            width: 400px;
            height: 400px;
            float: left;
            border: 20px solid #000;/* 必须先设置 */
            border-image: url("border.png") 26/20px repeat;
        }
    </style>
</head>
<body>
    <div class="box1">stretch(默认值)</div>
    <div class="box2">round</div>
    <div class="box3">repeat</div>
</body>
</html>

边框图片border-image

一、定义：

二、用法

猜你喜欢