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

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

代码语言：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 blac.........完整代码请登录后点击上方下载按钮下载查看