CSS3で半円を描く方法-CSSチュートリアル-php.cn

CSS3で半円を描く方法

青灯夜游

リリース： 2023-01-07 11:44:49

オリジナル

5179 人が閲覧しました

css3 半円を描画する方法: 1. これを実現するには、border-radius 属性を使用します。隣接する 2 つの角の値を幅/高さの半分に設定するだけです。他の 2 つの角を 0 に設定します。 2.これを実現するには、CSS3のclip属性とrect()関数を使用します。

CSS3で半円を描く方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

方法 1: border-radius を使用して半円を実装する

border-radius 属性は、要素の丸い境界線を設定するために使用されます。値を指定できます。 (1~4) 角丸効果

構文:

border-radius: 1-4 length|%

ログイン後にコピー

各半径の 4 つの値の順序は次のとおりです。左上隅、右上隅、右下隅、左下隅。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}

.clearfix {
zoom: 1;
/*为IE6，7的兼容性设置*/
}

.clearfix:after {
content: &#39;.&#39;;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

ul li {
list-style: none;
float: left;
margin: 50px 0 50px 20px;
text-align: center;
}

li {
background: red;
}

h2 {
margin-top: 20px;
}

.circle1 {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
line-height: 50px;
}

.circle2 {
width: 50px;
height: 100px;
border-radius: 0 50px 50px 0;
line-height: 100px;
}

.circle3 {
width: 100px;
height: 50px;
border-radius: 0 0px 50px 50px;
line-height: 50px;
}

.circle4 {
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
line-height: 100px;
}

.circle5 {
width: 100px;
height: 100px;
border-radius: 50px;
line-height: 100px;
}

</style>
</head>
<body>
<div>
<h2>用border-radius实现半圆</h2>
<ul>
<li>上边圆</li>
<li>左边圆</li>
<li>下边圆</li>
<li>左边圆</li>
<li>全圆</li>
</ul>

</div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSS3で半円を描く方法

方法 2: css3 のクリップメソッドを使用するクリッピングは、絶対位置の要素をクリップする半円

clipプロパティを実装します。つまり、position:absolute が使用されている場合にのみ有効です。唯一の有効な形状値は次のとおりです: rect (上、右、下、左)

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

.clearfix {
zoom: 1;
/*为IE6，7的兼容性设置*/
}

ul li {
list-style: none;
float: left;
margin: 50px 0 50px 20px;
text-align: center;
}

li {
background: red;
}

h2 {
margin-top: 20px;
}


.demo {
/*左半圆*/
position: absolute;
/*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。*/
width: 100px;
height: 100px;
border-radius: 50px;
/* line-height: 50px; */
clip: rect(0px 50px 100px 0px);
/*唯一合法的形状值是：rect (top, right, bottom, left)*/
}

.right-circle {
/*右半圆*/
left: 200px;
clip: rect(0px 100px 100px 50px);
/*唯一合法的形状值是：rect (top, right, bottom, left)*/
}


</style>
</head>
<body>
<div>
<h2>css3的clip 方法剪裁实现半圆</h2>
<p style="color: red;"></p>
<ul style="position: relative;">
<li>左半圆</li>
<li class="demo right-circle">右半圆</li>
<li></li>
</ul>
</div>
</body>
</html>

ログイン後にコピー

レンダリング:

CSS3で半円を描く方法