css半圆弧形

最新推荐文章于 2024-07-12 14:38:32 发布

原创最新推荐文章于 2024-07-12 14:38:32 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

奇技淫巧同时被 2 个专栏收录

30 篇文章

订阅专栏

html

2 篇文章

订阅专栏

 <div class="foot">
        <!-- 两端对齐 -->
        <div class="foot-conter"></div>
      </div>

.foot{
  position: fixed;
　bottom: 0;
  width: 100%;
  height: 250rpx;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  background: rgba(0,0,0,0.5);
  border: 1px solid #18b3cd;
}

.foot-conter{
  position:absolute;
  height: 200rpx;
  width: 200rpx;
  left:50%;
  margin-left: -100rpx;
  border-radius: 200rpx;
  background-color: #373737;
  border: 1px solid #18b3cd;
}