作者：amwaysuju | 来源：互联网 | 2023-05-18 09:41
一、定义：在内容变化的容器里使用，边框自动填充，由于浏览器的兼容问题，没有广泛使用border-image属性是速记属性用于设置border-image-source,borde
一、定义：
- 在内容变化的容器里使用，边框自动填充，由于浏览器的兼容问题，没有广泛使用
-
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">rounddiv>
<div class="box3">repeatdiv>
body>
html>
京公网安备 11010802041100号