Question

我对线性梯度，IE11和calc（）函数有疑问。

此代码段在Chrome和IE11上的行为有所不同。

background: linear-gradient(to top right, transparent calc(50% - 1px), #ccc, transparent calc(50% + 1px));

Chrome
IE11

我希望它看起来像Chrome版本。
有人有解决方案吗？

Answer 1

我发现了问题。 IE11不喜欢calc（）函数。我用的不是calc(50% - 1px)和calc(50% + 1px)的绝对值，它是div大小+ -1的一半。

Answer 2

这是另一个想法，您不需要知道div的大小，但是就不会具有透明度：

.box {
  background:
    linear-gradient(to top   right,transparent 49.8%,#fff 50%) top    -1px right -1px,
    linear-gradient(to bottom left,transparent 49.8%,#fff 50%) bottom -1px left  -1px,
    #ccc;
  background-size:100% 100%;
  background-repeat:no-repeat;

/* irrelevant styles */
  width:150px;
  height:150px;
  display:inline-block;
  vertical-align:top;
  border:1px solid;
}

<div class="box">
</div>

<div class="box" style="width:200px">
</div>
<div class="box" style="height:200px">
</div>

与其他想法类似的问题：linear-gradient border modify

线性梯度或calc（）在IE11中不起作用

2 个答案: