[英]CSS3 linear gradient error in Google Chrome
I'm running this code on an element I have that essentially results in one bevelled corner in the bottom right (to look like a vintage photo essentially). 我正在一个元素上运行此代码,该元素实际上导致右下角的一个斜角(本质上看起来像老式照片)。
The code works fine in Firefox and Safari but in Chrome I'm seeing a strange see-thru line striking vertically through the middle (see below). 该代码在Firefox和Safari中工作正常,但是在Chrome中,我看到一条奇怪的透视线垂直穿过中间(见下文)。
Code taken from this tutorial: click here 本教程中的代码: 单击此处
Even stranger is the fact it only occurs on some of the elements present. 甚至更陌生的事实是,它仅出现在存在的某些元素上。
Here is the CSS3 code in its current form: 这是当前形式的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 here! JSFiddle在这里! http://jsfiddle.net/8wzk42ep/
http://jsfiddle.net/8wzk42ep/
You can use the following solution: 您可以使用以下解决方案:
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>
Explanation: 说明:
I think it is a bug on Google Chrome or the way how Google Chrome truncate the dimensions. 我认为这是Google Chrome上的错误或Google Chrome截断尺寸的方式。 If you resize the box to a smaller size, a horizontal line appears.
如果将框调整为较小的尺寸,则会出现一条水平线。 With this simple solution you can avoid both lines (vertical and horizontal).
通过这种简单的解决方案,您可以避免两条直线(垂直和水平)。
You only need to replace background-size: 50% 50%;
您只需要替换
background-size: 50% 50%;
with background-size: 51% 51%;
background-size: 51% 51%;
. 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.