Html 创建一个带有div和径向渐变的全宽半圆

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  background-image: radial-gradient(circle at center bottom, #387546, #387546 50%,transparent 50%);
  height: 30vh;
}

<footer></footer>

footer {
    width: 100%;
    position: relative;
    bottom: 0;
    background: radial-gradient(100% 120vh at 50% calc(100% + 30vh), #387546 calc(50% - 2px), #38754600 50%) 50% / calc(100% + 60vh) 100%;
    height: 30vh;
}

<footer></footer>

Html相关问答推荐

卸载伪元素 destruct 了CSS

将容器水平偏离中心放置在桌面上;在移动设备上平稳地集中缩小规模

使用固定的HTML代码创建两个可向右滚动的行

Flexbox嵌套div溢出

如何实现弯曲的梯形导航栏？

现代网络浏览器可以并行下载哪些类型的网络资源？还有，什么东西不能并行下载？

子元素的单一背景

如何在R中渲染Quarto文档时动态设置html文件名

如何使不断增长的div不溢出其包含固定div的父级

如何设计缠绕锚点元素的样式？

如何使用css在响应图像后面添加形状？

jQuery 索引返回不正确的结果

为什么即使我点击其他地方，我的 contenteditable="true" 也会被激活？

将组件移动到页面底部 Angular

模拟另一个输入值设置表单输入的数值

HTML、CSS设计图像出格

子 div 在父 div 中溢出

悬停一个 div 时更改所有其他 div 上的字体 colored颜色

shinydashboard 标题中的位置标题

文本输入在 Chrome 中保持水平滚动，带有文本溢出：省略号