ホームページ > 記事 > ウェブフロントエンド > CSSで円の半分を非表示にする方法
CSSで円の半分を非表示にする方法
- WBOYオリジナル
- 2021-12-09 15:56:582561ブラウズ
方法: 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。