Question

我有一个非常奇怪的错误，即Windows 8.1 64位上的11。 div上设置border-radius的box-shadow与div上的box-shadow不同，没有任何border-radius设置（

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.switchbtn1.first {border-right:none;border-radius:4px 0 0 4px;}
.switchbtn1.last {border-left:none;border-radius:0 4px 4px 0;}
.switchbtn1 {
  font-size:14px;
  line-height:14px;
  padding:3px 15px 6px;
  border:1px solid #E8BA66;
  float:left;
  box-shadow: 0px 3px 7px rgba(227, 168, 79, 0.6);
}
</style>
</head>

<body>  
  <div class="switchbtn1 first">un</div>
  <div class="switchbtn1">deux</div>
  <div class="switchbtn1 last">trois</div>        
</body>
</html>

结果如下：

enter image description here

你看到带圆角的div上的box-shadow与没有圆角的div上的box-shadow不同...

这个错误不会发生在所有IE11上。例如，对于Windows 7上的IE11，它的接缝不会发生

任何想法？

Answer 1

此解决方案适用于ie11

div {
   -moz-border-radius: 10px; /* Firefox */
   -webkit-border-radius: 10px; /* Safari, Chrome */
   -khtml-border-radius: 10px; /* KHTML */
    border-radius: 10px; /* CSS3 */
   -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
   box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
   background:rgba(50, 50, 50);
}

Answer 2

与此相关？ http://social.technet.microsoft.com/Forums/en-US/e262c912-5250-4996-acbc-41a8bcd11ba0/weird-ie-behavior-when-combining-drop-shadow-and-radius-css?forum=ieitprocurrentver

答案表明图形驱动程序存在问题：

我在高级选项中关闭了GPU渲染，重新启动后，带阴影的半径显示正常....

IE上的box shadow + border-radius无法正常工作

2 个答案: