Question

我有一个简单的CSS箭头：

.arrow-brown {
    height: 18px;
    width: 18px;
    border-top: 6px solid #39170b;
    border-right: 6px solid #39170b;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

在Firefox中，边框未正确渲染，两条细白线在边框宽度上出现。是否有任何解决方法来摆脱它们？

这是渲染图片： http://i.imgur.com/TmoAPv6.png

这是小提琴： https://jsfiddle.net/w2s9gp8w/

Answer 1

您可以尝试通过// check if password cookie is set if (!isset($_COOKIE['verify'])) { showLogin(""); }或box-shadow

绘制边框

＆＃13;

linear-gradient

＆＃13;

div {
  margin: 20px;
  float: left;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.box-shadow {
  height: 68px;
  width: 68px;
  box-shadow: inset -18px 18px #39170b;
}
.arrow-brown {
  height: 50px;
  width: 50px;
  border-top: 18px solid #39170b;
  border-right: 18px solid #39170b;
}
.gradient {
  height: 68px;
  width: 68px;
  background: linear-gradient(to left, #39170b, #39170b) top right no-repeat, linear-gradient(to top, #39170b, #39170b) top left no-repeat;
  background-size: 18px 100%, 100% 18px;
}
th {
  color:red;
  }
th:last-of-type {
  color:#54A719;
  }

＆＃13;

http://codepen.io/gcyrillus/pen/GZoKRj

Answer 2

我在Firefox中遇到了类似的问题，在使用transform（具体为scale）时无法正确显示边框。添加一个很小的border-radius为我解决了这个问题。

border-radius: 0.01px;

Answer 3

对我有用：

transform-style: preserve-3d;

在Firefox中使用css转换时边框呈现不正确

3 个答案: