border-radius将不适用于div顶部

我正在着陆页面上供个人使用，但我遇到了问题。我有一个边界半径的div，它叫做.popOut。边框半径适用于div的底部，但不适用于标题部分，为什么？我该如何解决这个问题？此外，如果你知道如何使箱形阴影变得更轻一点，而不是那么黑暗，那就太棒了！谢谢！border-radius将不适用于div顶部

代码：

HTML：

*{margin:0; padding:0;} 
 
    body{ 
 
    \t background: #CCC; 
 
    \t color:#000305; 
 
    \t font-size: 87.5%; 
 
    \t font-family: Arial, 'Lucida Sans Unicode'; 
 
    \t line-height: 1.5; 
 
    \t text-align: left; \t 
 
    } 
 
    .body{ 
 
    \t margin: 0 auto; 
 
    \t width: 70%; 
 
    \t background:#ebebeb; 
 
    \t margin:auto; 
 
    } 
 
    .mainBack{ 
 
    \t margin:auto; 
 
    \t background:white; 
 
    \t width:600px; 
 
    \t height:650px; 
 
    } 
 
    .popOut{ 
 
    \t background:white; 
 
    \t width:80%; 
 
    \t height:600px; 
 
    \t margin:auto; 
 
    \t box-shadow:0px 0px 15px 0px; 
 
    \t border-radius:6px; 
 
    \t position:relative; 
 
    \t top:30px; 
 
    } 
 
    .mainHeader{ 
 
    \t background:linear-gradient(#465BF6,#3149F2); 
 
    \t width:100%; 
 
    \t height:100px; 
 
    }

<html> 
 
    \t <head> 
 
    \t \t <meta charset="UTF-8"> 
 
    \t \t <title> 
 
    \t \t \t Welcome! 
 
    \t \t </title> 
 
    \t \t <script type="text/javascript" src="jquery.js"> 
 
    </script> 
 
    \t \t <script type="text/javascript" src="script.js"> 
 
    </script> 
 
    \t \t <link rel="stylesheet" href="style.css" type="text/css"> 
 
    \t </head> 
 
    \t <body class="body"> 
 
    \t \t <div class="mainBack"> \t 
 
    \t \t \t <div class="popOut"> 
 
    \t \t \t \t <div class="mainHeader"></div> 
 
    \t \t \t \t <div class="mainArea"></div> 
 
    \t \t \t \t <div class="mainAreaB"></div> 
 
    \t \t \t \t <div class="mainFooter"></div> 
 
    \t \t \t </div> \t 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

来源

2015-04-01 Noah Clark

只需复制并粘贴到文本文件 – 2015-04-01 00:12:00

你.mainHeader格被覆盖你.popOut div的边界半径。您可以将该行添加到您的.mainHeader类：border-radius: 6px 6px 0px 0px;

此外，为使您的box-shadow打火机只需添加这样的颜色：

box-shadow:#777 0px 0px 15px 0px;

下面是一个例子：

*{margin:0; padding:0;} 
 
body{ 
 
\t background: #CCC; 
 
\t color:#000305; 
 
\t font-size: 87.5%; 
 
\t font-family: Arial, 'Lucida Sans Unicode'; 
 
\t line-height: 1.5; 
 
\t text-align: left; \t 
 
} 
 
.body{ 
 
\t margin: 0 auto; 
 
\t width: 70%; 
 
\t background:#ebebeb; 
 
\t margin:auto; 
 
} 
 
.mainBack{ 
 
\t margin:auto; 
 
\t background:white; 
 
\t width:600px; 
 
\t height:650px; 
 
} 
 
.popOut{ 
 
\t background:white; 
 
\t width:80%; 
 
\t height:600px; 
 
\t margin:auto; 
 
\t box-shadow:#777 0px 0px 15px 0px; 
 
\t border-radius:6px; 
 
\t position:relative; 
 
\t top:30px; 
 
} 
 
.mainHeader{ 
 
\t background:linear-gradient(#465BF6,#3149F2); 
 
\t width:100%; 
 
\t height:100px; 
 
     border-radius: 6px 6px 0px 0px; 
 
}

<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title> 
 
\t \t \t Welcome! 
 
\t \t </title> 
 
\t \t <script type="text/javascript" src="jquery.js"> 
 
</script> 
 
\t \t <script type="text/javascript" src="script.js"> 
 
</script> 
 
\t \t <link rel="stylesheet" href="style.css" type="text/css"> 
 
\t </head> 
 
\t <body class="body"> 
 
\t \t <div class="mainBack"> \t 
 
\t \t \t <div class="popOut"> 
 
\t \t \t \t <div class="mainHeader"></div> 
 
\t \t \t \t <div class="mainArea"></div> 
 
\t \t \t \t <div class="mainAreaB"></div> 
 
\t \t \t \t <div class="mainFooter"></div> 
 
\t \t \t </div> \t 
 
\t \t </div> 
 
\t </body> 
 
</html>

来源

2015-04-01 00:16:47

我推荐使用'rgba（）'作为你的盒子阴影，如下所示：'box-shadow：0px 0px 15px rgba（100,100,100,0.5）'这将允许你改变颜色和不透明度（ 'a'是阿尔法）。你总是可以同时支持不支持'rgba'属性的浏览器。 – disinfor 2015-04-01 01:09:25

您遇到的问题是，.mainHeader没有一个边界半径：和满溢超过.popOut边缘。

.mainHeader{ 
     background:linear-gradient(#465BF6,#3149F2); 
     width:100%; 
     height:100px; 
     border-radius:5px 5px 0 0; 
    }

JSFiddle Demo
或者给予.popOut溢出隐藏：
您可以通过给主头边框半径修复

.popOut{ 
     background:white; 
     width:80%; 
     height:600px; 
     margin:auto; 
     box-shadow:0px 0px 15px 0px; 
     border-radius:6px; 
     position:relative; 
     top:30px; 
     overflow:hidden; 
    }

JSFiddle Demo

来源

2015-04-01 00:16:31

真棒！非常感谢 – 2015-04-01 00:18:18

Easy add，overflow: hidden;至.popOut

Sorted！

发生这种情况的原因是因为你的蓝色div覆盖了popOut div，而它又覆盖了圆角。添加overflow:hidden;隐藏任何超出popOut容器的内容！

至于箱阴影到这里看看：http://css3gen.com/box-shadow/

我觉得即使有很多的经验，这是非常有用的。如上面的链接所示，您可以将rgba添加到方框阴影中，这使您可以更改颜色和不透明度！

来源

2015-04-01 00:18:12 cnorthfield

border-radius将不适用于div顶部

回答

相关问题