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頂部

回答

相關問題