前端知识点系列 ---- 实现椭圆，半椭圆，圆弧

最新推荐文章于 2024-05-16 14:33:11 发布

小六路

最新推荐文章于 2024-05-16 14:33:11 发布

阅读量991

点赞数 1

文章标签： css

本文链接：https://blog.youkuaiyun.com/Lycoris_Red/article/details/115078755

版权

这篇博客介绍了如何使用CSS的`linear-gradient`和`border-radius`属性来创建不同类型的椭圆和半椭圆背景效果。示例代码展示了从简单到复杂的渐变背景，包括半个椭圆、椭圆以及带有倾斜渐变的椭圆。这些技巧对于前端开发者在设计独特布局时非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 /* 半个椭圆  水平半径/垂直半径 */
div {
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(254, 172, 94, 0.5),
    rgba(199, 121, 208, 0.5)
  );
  border-radius: 50% / 0 0 100% 100%;

}

  /* 椭圆 */
div{
    height: 100px;
    background: linear-gradient(
    to right,
    rgba(254, 172, 94, 0.5),
    rgba(199, 121, 208, 0.5)
  );
  border-radius: 50% / 50%;
}

.login-top {
  height: 200px;
  background: linear-gradient(
    to right,
    rgba(254, 172, 94, 0.5),
    rgba(199, 121, 208, 0.5)
  );

  border-radius: 50% / 0 0 20% 20%;
}