在Firefox中使用CSS转换时边框显示不正确 [英] Incorrect border rendering when using css transform in Firefox

问题描述

我有一个简单的CSS箭头，如下所示:

I have a simple CSS arrow like this:

.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中，边框显示不正确，边框宽度上出现了两条细白线.有什么解决方法可以摆脱它们?

In Firefox the borders are not rendered correctly, two thin white lines are appearing accross the border width. Is there any workaround to get rid of them??

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

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

推荐答案

您可以尝试通过box-shadow或通过linear-gradient

you can give a try to draw the borders via box-shadow or via linear-gradient

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;
  }

<table>
  <caption>Tests on rotated shapes</caption>
  <thead>
    <tr>
      <th>border</th>
      <th>box-shadow</th>
      <th>linear-gradient</th>
    </tr>
    <thead>
      <tbody>
        <tr>
          <td>
            <div class="arrow-brown"></div>
          </td>
          <td>
            <div class="box-shadow"></div>
          </td>
          <td>
            <div class="gradient"></div>
          </td>
        </tr>
      </tbody>
</table>

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

这篇关于在Firefox中使用CSS转换时边框显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！