【问题标题】:Is it a Chrome issue for inset box-shadow with big border-radius in single side?单边具有大边框半径的嵌入框阴影是否是 Chrome 问题?
【发布时间】:2016-08-14 22:17:10
【问题描述】:

单边带有大边框半径的嵌入框阴影是否是 Chrome 问题?

我想知道哪个浏览器是正确的?

Chrome 中:

Firefox 中:

<div style="
  border-top-left-radius: 100%;
  box-shadow: inset 0px 0px 0 20px red;
  background-color: #ccc;
  width: 200px;
  height: 100px;
"></div>

【问题讨论】:

标签: css google-chrome box-shadow


【解决方案1】:

这似乎是一个 Firefox 问题。对于此示例,我建议您调整 css 以便您可以使用边框。

div{
border-top-left-radius: 100%;
background-color: #ccc;
width: 160px;
height: 60px;
border:20px solid red;
}
p{
border-top-left-radius: 100%;
box-shadow: inset 0px 0px 0 20px red;
background-color: #ccc;
width: 200px;
height: 100px;
}
<p></p>
<div></div>

更新:我也检查了 Safari 和 Opera。看起来是这样的:

-->Safari

--> 歌剧

【讨论】:

  • Opera 只是另一个 Chrome(Blink) 浏览器,而 Safari 的风格太诡异了……
猜你喜欢
  • 2011-02-25
  • 2017-05-01
  • 2020-10-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多