2015-04-01 113 views
1

我正在着陸頁面上供個人使用,但我遇到了問題。我有一個邊界半徑的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>

+0

只需複製並粘貼到文本文件 – 2015-04-01 00:12:00

回答

0

.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>

+0

我推薦使用'rgba()'作爲你的盒子陰影,如下所示:'box-shadow:0px 0px 15px rgba(100,100,100,0.5)'這將允許你改變顏色和不透明度( 'a'是阿爾法)。你總是可以同時支持不支持'rgba'屬性的瀏覽器。 – disinfor 2015-04-01 01:09:25

0

您遇到的問題是,.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

+0

真棒!非常感謝 – 2015-04-01 00:18:18

0

Easy add,overflow: hidden;.popOut

Sorted!

發生這種情況的原因是因爲你的藍色div覆蓋了popOut div,而它又覆蓋了圓角。添加overflow:hidden;隱藏任何超出popOut容器的內容!

至於箱陰影到這裏看看:http://css3gen.com/box-shadow/

我覺得即使有很多的經驗,這是非常有用的。如上面的鏈接所示,您可以將rgba添加到方框陰影中,這使您可以更改顏色和不透明度!