svg+css实现border-image-slice边框图片切割效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现border-image-slice边框图片切割效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">

  
  
<style>
body {
  font-family: consolas;
  font-size: 12px;
  min-height: 100vh;
  --R: 250;
  --Rpx: calc(var(--R) * 1px);
  --r: calc(1px * var(--R) / 100);
}
p {
  text-align: center;
}

#wrap {
  position: absolute;
  width: var(--Rpx);
  height: var(--Rpx);
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#wrap span {
  box-sizing: border-box;
  display: block;
  background-color: red;
  width: 10px;
  height: 10px;
  position: absolute;
  cursor: all-scroll;
}

#wrap span.active {
  outline: 1px solid black;
  background: gold;
}

#wrap span.active::before {
  content: attr(data-title);
  position: absolute;
  width: 759px;
}

#wrap #rSpan {
  /*right*/
  top: -5px;
  left: -5px;
  transform: translate(calc((100 - 45) * var(--r)), 0);
}

#wrap #bSpan {
  /*bottom*/
  right: -5px;
  top: -5px;
  transform: translate(0, calc((100 - 45) * var(--r)));
  /*background-color: green;*/
}
#wrap #lSpan {
  /**left*/
  bottom: -5px;
  left: -5px;
  transform: translate(calc(45 * var(--r)), 0);
  /*background-color: blue;*/
}
#wrap #tSpan {
  /*top*/
  left: -5px;
  top: -5px;
  transform: translate(0, calc(45 * var(--r)));
  /*background-color: purple;*/
}

#wrap #rSpan::before {
  top: -1.5em;
}
#wrap #bSpan::before {
  left: 1em;
  top: -5px;
}

#wrap #lSpan::before {
  bottom: -1em;
}

#wrap #tSpan::before {
  left: -75px;
  top: -5px;
}

#wrap {
  border: 1px solid;
}

#BI {
  padding: 2em;
  border: 17px solid black;
  position: absolute;
  width: 60%;
  min-width: 370px;
  height: var(--Rpx);
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  /*  
border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M2,22h2v-4h-2v-4h6v-12h4v4h-10v-4h4v10h-4v-4h12v-6h4v2h4v-2 H78v2h4v-2h4v6h12v4h-4v-10h4v4h-10v-4h4v12h6v4h-2v4h2 V78h-2v4h2v4h-6v12h-4v-4h10v4h-4v-10h4v4h-12v6h-4v-2h-4v2 H22v-2h-4v2h-4v-6h-12v-4h4v10h-4v-4h10v4h-4v-12h-6v-4h2v-4h-2V22z ' fill='none' stroke='black'%3E%3C/path%3E%3Cg id='lines'%3E%3C/g%3E%3C/svg%3E");
border-image-slice:45%;
border-image-repeat:round;
border-image-width: 20px;
border-image-outset:5px;*/
}

#lines {
  stroke: black;
  stroke-width: 1px;
  fill: none;
  vector-effect: non-scaling-stroke;
}

#controls {
  display: none;
}

[type="range"] {
  position: relative;
  top: 5px;
}
#bioSpan {
  display: inline-block;
  width: 5em;
  text-align: left;
}
</style>

</head>

<body >
  <p><label>Use the slider to change the `border_image_width`: <input type="range" id="border_image_width" value="20" /></label><span id="biwSpan"></span></p>
<p>Drag the red points to change the `border-image-slice` value.  
</p>

<div id="controls"><!--display:none-->
  <input type="range" id="t_input" min="0" max="100" value="45" step=".1" /><span></span> top<br>
  <input type="range" id="r_input" min="0" max="100" value="45" step=".1" /><span></span> right<br>
  <input type="range" id="b_input" min="0" max="100" value="45" step=".1" /><span></span> bottom<br>
  <input type="range" id="l_input" min="0" max="100" value="45" step=".1" /><span></span> left
</div>

<div id="BI"><!--the div with a border image-->
  <div id="wrap">
    <!--the draggable red dots-->
    <span id="rSpan" data-title="right:45.00%"></span>
    <span id="bSpan" data-title="bottom:45.00%"></span>
    <span id="lSpan" data-title="left:45.00%"></span>
    <span id="tSpan" data-title="top:45.00%"></span>

    
<div id="svgwrap">
<!--the svg element used to draw the border-->
<svg  id="svg" viewBox='0 0 18 18' >
<path d='M1,1h4v2h2v-2h4v2h2v-2h4v4h-2v2h2v4h-2v2h2v4h-4v-2h-2v2h-4v-2h-2v2h-4v-4h2v-2h-2v-4h2v-2h-2v-4z' fill="none" stroke="black"></path>  
<path  fill="none" stroke="black" d="M8,3h2M15,8v2M10,15h-2M3,10v-2" stroke-width=".5" /> 
</svg>
  

</div>
 
</div>

      <script >
c.........完整代码请登录后点击上方下载按钮下载查看