我是新与radial-gradient ，我不知道什么是多维数据集之间的那些背台词或空格？ 如何去除呢？
* {margin: 0; outline: 0; border: 0;} .round { background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%); background-position: bottom left, bottom right, top right, top left; background-size: 50% 50%; background-repeat: no-repeat; width: 300px; height: 300px; padding: 10%; transform: rotate(45deg); } p { transform: rotate(-45deg); width: 100px; margin: 100px; }
<div class="round"> <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p> </div>
有程式码中的两个问题，当我们解决这两个那些在中间显示出来怪异的间隙或线将完全消失了..
- 问题1：你被设定
padding: 10%的元件，而不是一个固定的值上。 当我们给的值作为一个百分比，我们在UA的怜悯四舍五入逻辑方面。 每个UA都有自己的取整逻辑。 举个例子的框的包含块的宽度是510px ，现在10％来51px 。 一个元件的实际宽度包括其填充，所以在这里将成为351px以及当UA尝试计算宽度的50％ background-size ，所得到的值将是175.5px 。 这是美中不足的是 。 有些浏览器四舍五入它归结为175px ，有的像FF具有几轮下来一些，但向上舍其他独特的逻辑，有的只是圆起来等 。 当值向下取整，两个背景件的总尺寸为350像素，但盒子的实际宽度为351px，这1px的区别是，你看到的差距。 - 问题2：当我们将一个元素上的转换，这种差距始终出现。
我的感觉是，这已经是与元素的背面 ，因为它会消失，当我们设置backface-visibility来hidden 。 我们已经在答案的底部增加了一个详细的解释 。 （ 这是在Chrome测试，但应在所有工作。如果它不那么有没有办法解决。）
在下面的代码片段，我已经解决了这两个问题，你可以看到它是如何工作的罚款。 还有一个额外的抓与backface-visibility: hidden 。 当您设置这个容器元素上，所有的是元素中的文本得到模糊。 所以，最好是使用伪因为它不会影响到的显示，以创建背景p元素。
* { margin: 0; outline: 0; border: 0; } .round { position: relative; width: 300px; height: 300px; padding: 30px; } .round:after { position: absolute; content: ''; height: 100%; width: 100%; top: 0px; left: 0px; background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%); background-position: bottom left, bottom right, top right, top left; background-size: 50% 50%; background-repeat: no-repeat; transform: rotate(45deg); backface-visibility: hidden; z-index: -1; } p { width: 125px; margin: 85px; }
<div class="round"> <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p> </div>
如通过在他的评论瓦尔斯提到的问题2也可以通过从CPU到GPU层移动元件的呈现解决。 这通常是通过加入完成 translateZ(1px)到变换堆栈。 他还指出，在某些情况下这个提高了抗混叠过。
* { margin: 0; outline: 0; border: 0; } .round { position: relative; width: 300px; height: 300px; padding: 30px; background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%); background-position: bottom left, bottom right, top right, top left; background-size: 50% 50%; background-repeat: no-repeat; transform: rotate(45deg) translateZ(1px); } p { transform: rotate(-45deg) translateZ(-1px); width: 125px; margin: 85px; }
<div class="round"> <p>By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p> </div>
解释问题2：
下面是什么可能是第二个问题的原因更详细的解释 。 由于瓦尔斯在想出这个原因，他出色的帮助。
比方说，两个不同的梯度直接呈现在画布上 ，而无需中间缓冲器。 沿着对角线即两个梯度之间的边界，有由第一梯度只覆盖50％的像素。 和以后，也将通过所述第二梯度覆盖为50％。
这应该等于全像素（50％+ 50％）。 但要使它的方法是用0.5的阿尔法 。 的问题是，在这种情况下， 运算是乘法而不是加法，并具有0.5的α渲染两次只会给0.75的α，而不是1。所以该像素是透明的还是在一定程度上，并且背景显示。
这可以通过启用“显示画图Rects”和“显示层边框”，在Chrome浏览器开发控制台选项进行验证（在某种程度上）。 对于有问题的片段，没有创建图层 。 也就是说，该元件被涂在其旋转的形式 ，因此在两个梯度图像之间的分离点是沿对角线。 因为它是沿对角线，像素的50％必须分配给每个图像。
在GPU上呈现的中间缓冲器（或层）完成后，旋转之前，所以像素处于偶数边界上。 它也可以使用一个子像素渲染。
这也可以使用Chrome浏览器开发控制台验证。 附加任何3D转换属性（如backface-visibility ， translateZ在创建层的）的结果。 现在，该元件在其正常形式（无旋转）第一涂，然后单独层旋转。 因此，分离点是沿直线而不是对角线，因此没有必要为50-50逻辑。 当我们考察两个片段的答案，我们可以看出围绕元素橙色上下的边界（将不存在有问题的片段）。 这是层的边框（我们能够经由前面的设置它的显示）。
