我在我拥有的元素上运行此代码,基本上会在右下角产生一个斜角(看起来像一张老式照片)。
代码在Firefox和Safari中运行良好,但在Chrome中,我看到一条奇怪的透视线在中间垂直穿过(见下文)。
本教程的代码:click here
更奇怪的是,它只发生在一些存在的元素上。
以下是当前形式的CSS3代码:
padding: 10px;
background: #FFF;
background:
linear-gradient(135deg, transparent 0px, #FFF 0px) top left,
linear-gradient(225deg, transparent 0px, #FFF 0px) top right,
linear-gradient(315deg, transparent 10px, #FFF 0px) bottom right,
linear-gradient(45deg, transparent 0px, #FFF 0px) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
JSFiddle在这里! http://jsfiddle.net/8wzk42ep/
您可以使用以下解决方案:
html, body {
background-color:#000;
}
div.box {
padding:10px;
background:#fff;
background:
linear-gradient(135deg, transparent 0px, #fff 0px) top left,
linear-gradient(225deg, transparent 0px, #fff 0px) top right,
linear-gradient(315deg, transparent 10px, #fff 0px) bottom right,
linear-gradient(45deg, transparent 0px, #fff 0px) bottom left;
background-size:51% 51%; /** changed to 51% */
background-repeat:no-repeat;
}
<div class="box">
<h1> Hello there! </h1>
</div>
说明: 我认为这是Google Chrome上的一个错误,也就是Google Chrome截断维度的方式。如果将框调整为较小的尺寸,则会出现水平线。使用这个简单的解决方案,您可以避免两条线(垂直和水平)。
你只需要用background-size: 50% 50%;
替换background-size: 51% 51%;
。