边框半径与盒式阴影插图像素化/坚固 [英] border-radius with box-shadow inset pixelized / rugged

问题描述

如果您看不到此问题，请尝试查看此 codepen ，这里你应该看看我的意思。

我已经尝试了几种方法来修复它。在下面的评论中你可以看到其中的一个。但它似乎在适当的边界和放映阴影之间呈现了1px粗糙的边框

。

如果它依赖于浏览器渲染器，那么它是一个错误？
如何针对所有现代浏览器正确解决此问题。

$ b

html {background-color：＃554343 ;} div {display：block;宽度：300px; height：300px;保证金：0汽车;边界半径：50％; border-width：0; / * no result border-width：2px; // uncommented no result border-style：solid; // uncommented no result even with inset * / background-color：white; box-shadow：inset 1px 1px 150px，inset -1px -1px 150px;}

 < div>< / div>  

编辑：
试过也是这样，但没有正面结果： false>

html {background-color：＃554343;}。container {显示：块;宽度：300px; height：300px;保证金：0汽车;边界半径：50％; / *尝试49.5％，但不接受* / box-shadow：inset 1px 1px 150px＃000，inset -1px -1px 150px＃000;}。content {position：relative;宽度：100％;身高：100％;边界半径：50％;背景颜色：白色; z-index：-1;}

< div class = 容器 > < div class =content> < / div>< / div>

解决方案

https://code.google.com/ p / chromium / issues / detail？id = 442335

好像已打开的Chrome bug。我无法为您的案例提出解决方案。如果您希望更快修复此问题，请在Bug跟踪器上投票处理此问题！

If you can't see this problem then please try take a look at this codepen, here you should see what I mean.

I've tried several ways to fix it. Below in comments you can see one of them. Still it seems to render 1px rugged border between proper border and dropped shadow.

If it depends on browser renderer then is it a bug? How to fix it properly for all modern browsers.

html{
  background-color: #554343;
}
div{
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 50%;
  border-width: 0;      /* no result
  border-width: 2px;  // uncommented no result
  border-style: solid;// uncommented no result even with inset*/
  background-color: white;
  box-shadow: inset 1px 1px 150px, inset -1px -1px 150px;
}

<div>
</div>

EDIT: Tried also this way but without positive result:

html{
  background-color: #554343;
}
.container{
  display: block;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border-radius: 50%; /* tried 49.5% but it's not acceptable */
  box-shadow: inset 1px 1px 150px #000, inset -1px -1px 150px #000;
}
.content{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: white;
  z-index: -1;
}

<div class="container">
  <div class="content">
  </div>
</div>

解决方案

https://code.google.com/p/chromium/issues/detail?id=442335

Seems like opened Chrome bug. I couldn't come up with a solution for your case. Please vote this issue on bug tracker if you want it to be fixed sooner!

这篇关于边框半径与盒式阴影插图像素化/坚固的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！