0

我目前正在为一个布局而苦苦挣扎，我在问自己这是否可以使用纯 css 或者我是否必须使用图像。

我想要实现的是这样的：

盒子里的缺口

所以这<body>是黄色区域，而白框是<header>一个区域被切断的地方。阴影和圆角是这里的棘手问题。

我只是摆弄了一下。

4

1 回答 1

1

在标题中添加一个 div 并给出 position:absolute。根据您的模拟设置潜水样式。（我无法得到底部曲线：（）

header {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
    height: 100px;
    position:relative
}
.curve{
    background: #fcf5e5;
     border-radius:14px;
    box-shadow: inset 1px 4px 8px -5px #333;
    -moz-box-shadow: inset 1px 4px 8px -5px #333;
    -webkit-box-shadow: inset 1px 4px 8px -5px #333;
    height:60px;
    width:250px;
    position:absolute;
    left:0; right:0;
    margin:0 auto;
    bottom:-9px
}

演示

于 2013-04-18T10:33:24.530 回答