Question

有没有办法在HTML元素上使用椭圆曲线边框？它应该是这样的：

example

灰色区域是我的通用标题，黑色区域是我在每个视图上的内容。它的设置如下：

我的_Layout.cshtml看起来像这样：

    <body>
    <div data-role="page" data-theme="a">
        <div data-role="header">
                @Html.Partial("_LoginPartial")
        </div>
        <div data-role="content">
            @RenderBody()
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
    @RenderSection("scripts", required: false)
</body>

基本部分是_LoginPartial.cshtml，它是灰色区域。现在我希望这个元素在我的图片中看起来像。

如果您需要更多信息，请告诉我。

Answer 1

寻找这样的事情：？

演示：http://jsfiddle.net/abhitalks/e36uD/1/

标记：

<div class="container"> <!-- your data-role="page" -->
    <div class="top"></div> <!-- your data-role="header" -->
    <div class="content"></div> <!-- your data-role="content" -->
</div>

CSS ：

.container {
    width: 300px; height: 300px;
    background-color: #000;
}
.top {
    height: 100px;
    background-color: #ccc;
    border-radius: 0 0 45% 45%;
}

与其他 * shorthands * 一样，border-radius也是：top right bottom left;

创建椭圆曲线边框

1 个答案: