Question

我有带bootstrap导航栏的html页面。有一个主容器保存网站内容。主容器具有顶部填充，用于在导航栏后启动其内容。因此，弯曲边框不会出现在顶部边框处。在底部，弯曲的边框工作正常。

是否有任何css解决方案在顶部边框上显示弯曲边框？

小提琴：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;
    }

Answer 1

将填充更改为边距

<div id="mainContainer" class="container body-content" style="margin-top:60px; background-color:#FFFFFF">

由于导航栏，弯曲的边框会隐藏

1 个答案: