方法: 1. 円形要素を div コンテナに配置します; 2. div の高さを円の半径の長さに設定し、div の幅を円の直径の長さに設定します。 div が正確になるように、半円を配置できます; 3. div 要素に「overflow: hidden」スタイルを追加して、div の外側の半円を非表示にします。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css で円の半分を非表示にする方法
CSS では、まず円形の要素を div に配置してから、 div の高さは円の半径に設定され、幅は円の直径に設定されます。
このとき、overflow 属性を使用して、div を超えた円形の部分を非表示にすることができます。
例は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.mask2{
width: 100px;
height: 50px;
overflow: hidden;
}
.round2{
width: 100px;
height: 100px;
background-color: cornflowerblue;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="mask2">
<div class="round2"></div>
</div>
</body>
</html>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで円の半分を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
