2

我将 CSS3 边框图像与 scale3d 转换结合使用。效果很好，除了在谷歌浏览器中。Chrome 在背景被裁剪的边框图像块之间显示了一些透明条纹。

我做了一个截图：

在此处输入图像描述

这是HTML代码：

<div class="frame scale">
Hello Hello<br/>
Hello Hello<br/>
Hello Hello<br/>
Hello Hello<br/>
</div>

和CSS代码：

body{
  background-color: red;
}
div{
  display: inline-block;
  position: absolute;
  top: 170px;
  left: 170px;
  background-color: transparent;
  transform: scale3d(3.1,3.1,1);
}

.frame{
    padding: 5px;
    border-style: solid;
    border-width: 38px 28px 37px 18px;
    -webkit-border-image: url(https://picload.org/image/rgrocaia/roll13_t1_small1_25.png) 38 28 37 18 stretch;
       -moz-border-image: url(https://picload.org/image/rgrocaia/roll13_t1_small1_25.png) 38 28 37 18 stretch;
         -o-border-image: url(https://picload.org/image/rgrocaia/roll13_t1_small1_25.png) 38 28 37 18 stretch;
}

我还为你做了一个小提琴：https ://jsfiddle.net/kd7sz0s5/1/

问题似乎与 scale3d 命令有关。因为当我将 scale3d 值设置为偶数（例如 scale3d(3,3,1)）时，条纹正在消失。

希望你们能帮助我。

4

0 回答 0