html - 如何在每个部分制作此边框底部曲线?

标签 html css

<分区>


关闭 4 年前

我正在设置一个新的网站布局,但我不知道如何在每个部分制作这个边框底部曲线,请看这张图片,任何人都可以给我一些想法吗?

我曾尝试从每个部分裁剪掉所有背景图像,但它并不适合所有分辨率。

/image/DHC0C.png

最佳答案

你可以简单地使用下面的 css...

.container {
  display: block;
  margin: auto;
  width: 400px;
  height: 300px;
  background-color: #AAA;
  overflow: hidden;
  border-top-left-radius: 100% 10%;
  border-bottom-right-radius: 100% 10%;
  box-shadow: 0px 5px 15px -8px rgba(0,0,0,0.7) inset, 0px -5px 15px -8px rgba(0,0,0,0.7) inset;
}
<div class="container"></div>

关于html - 如何在每个部分制作此边框底部曲线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54664437/

上一篇:css - 文本区域与输入字段的宽度不同

下一篇:php - 图片上的链接在移动设备上不起作用

相关文章:

html - 我可以使用 CSS 为任何元素添加元素符号吗?

Jquery 将 HTML 作为对象或数组返回

javascript - 如何突出显示链接到已选菜单的元素

css - 网站 - 在 2 个 div 之间溢出图像

javascript - 使用 JavaScript 在 SortableJS 可排序列表上模拟拖放

html - CSS 将 div 分配给任何百分比最终会填满整个屏幕?

html - 如何使 <ul> 折叠到 float <li> 的宽度?

html - right-top 和 right-bottom 的高度一起等于左列

css - 显示 :after when hovering over the parent element via CSS

html - 如何在自己的 html 中使用 mjpg-streamer?