0
ausgeblendet Ich habe html Seite mit bootstrap navbar. Es gibt einen Hauptcontainer, der den Inhalt der Site enthält. Der Hauptcontainer verfügt über eine obere Füllung, um den Inhalt nach der Navigationsleiste zu starten. Aus diesem Grund erscheint der geschwungene Rand nicht am oberen Rand. Am unteren Rand funktioniert die geschwungene Umrandung gut.Curved border wird wegen navbar
Gibt es eine CSS-Lösung, um die geschwungene Grenze auch an der oberen Grenze anzuzeigen?
Fiddle: https://jsfiddle.net/LijoCheeran/cttstnob/3/
HTML
<body class="bodybackground">
<div class="navbar navbar-inverse navbar-fixed-top ui-widget-header">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="padding-top:0px; padding-bottom:2px;">
<div id="divBrandNameText" class="cookieFontGoogle" style="display:inline-block;color:#FFFFFF; vertical-align:central;">Brand</div>
</a>
</div>
<div class="navbar-collapse collapse">
</div>
</div>
</div>
<div id="mainContainer" class="container body-content" style="padding-top:60px; background-color:#FFFFFF">
Test
<div style=" padding-top:100px;">
A
</div>
B
</div>
</body>
CSS
.navbar {
background-color: #00A0F0;
}
.navbar-fixed-top {
border-bottom: 1px solid #0078A0;
}
.navbar-inverse .navbar-nav > li > a {
color: #FFFFFF;
font-weight: bold;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #737373;
font-weight: bold;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #FFFFFF;
background-color: #00A0F1;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #FFFFFF;
font-weight: bold;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #FFFFFF;
font-weight: bold;
background-color: #00A0F1;
}
.cookieFontGoogle {
font: 200 50px/1.3 'Cookie', Helvetica, sans-serif;
color: #fff;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}
#mainContainer {
border-radius: 25px;
}
.bodybackground {
background-color: #A9D5E7;
}