css画弧线-《CSS3绘制半圆的方法CSS半圆代码》期待您的评论！

本文主要详细介绍CSS3中绘制半圆的CSS半圆代码。 有一定的参考价值。 有兴趣的朋友可以参考一下。 有需要的同学可以收藏起来供以后参考。

有时候我们想通过CSS3实现半圆，我们首先想到的就是CSS3的border-radius属性。 无论是圆角、圆弧、实心圆、半圆，我们都可以使用这个属性来实现。 实现代码如下：

<pre class="brush:css;toolbar:false">.semi-circle{
  width:100px;
  height:50px; 
  background-color:#cb18f8;
  border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */
}

代码分析：

1）使用border-radius定义各个方向的圆弧直径，将左上和右上圆角直径设置为50px，将右下和左下圆角直径设置为0。得到的效果是上半圆。

2）圆角直径应等于梯形的高度。 上例中的值为 50px。

暗示：

我们可以调整border-radius值css画弧线css画弧线，以及正方形的长（宽）和高（高）值来实现各个方向的半圆。

实现代码如下：

 
 


/* 上半圆 */
.semi-circle{
  width:100px;
  height:50px; 
  background-color:#cb18f8;
  border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */
}
/* 下半圆 */
.semi-circle2{
  width:100px;
  height:50px; 
  background-color:#cb18f8;
  border-radius:0 0 50px 50px; /* 左上、右上、右下、左下 */
}
/* 左半圆 */
.semi-circle3{
  width:50px;
  height:100px; 
  background-color:#cb18f8;
  border-radius:50px 0 0 50px; /* 左上、右上、右下、左下 */
}
/* 右半圆 */
.semi-circle4{
  width:50px;
  height:100px; 
  background-color:#cb18f8;
  border-radius:0 50px 50px 0; /* 左上、右上、右下、左下 */
}
table{
  width:400px;
}

以上就是CSS3中绘制半圆的CSS半圆代码的全部内容。 希望对您的学习有所帮助，解决您的疑惑。 也希望大家支持361模板网。

感谢您的打赏，我们将为您提供更多优质资源！