ホームページ  >  記事  >  ウェブフロントエンド  >  要素形状「適応楕円」_html/css_WEB-ITnose

要素形状「適応楕円」_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:45:511158ブラウズ

デザインシーン


  • コンテンツに応じて 自動的に調整および適応できることを期待して、要素に固定の幅と高さを指定しないことがあります。
  • 幅と高さが等しい場合は円として表示され、幅と高さが等しくない場合は楕円として表示されます

解決策


構造

<div class="box">    <!-- 自适应的椭圆内容 --></div>

スタイル

.box {  width: 200px;  height: 200px;  border-radius: 50%;}

説明: このパーセント値は、 要素のサイズに基づいて解析されます

ここに書かれているように、編集者は次のように尋ねています: 半楕円形の実装方法はどうですか?


  • 水平軸に沿って分割された上半楕円構造

    <div class="box">  <!-- 半椭圆内容 --></div>
    スタイル

    .box {width: 256px;height: 160px;background-color: #fb3;border-radius: 50% / 100% 100% 0 0;}
  • 横軸に沿って分割された下半楕円構造

    <div class="box">  <!-- 半椭圆内容 --></div>
    スタイル

    .box {width: 256px;height: 160px;background-color: #fb3;border-radius: 50% / 0 0 100% 100%;}
  • 縦軸に沿って分割された左半楕円構造

    <div class="box">  <!-- 半椭圆内容 --></div>
    スタイル

    .box {width: 256px;height: 160px;background-color: #fb3;border-radius:  100% 0 0 100% / 50%;}
  • 縦軸に沿って分割された右半楕円構造

    <div class="box">  <!-- 半椭圆内容 --></div>
    スタイル

    .box {width: 256px;height: 160px;background-color: #fb3;border-radius:  0 100% 100% 0 / 50%;}
注:

border-radius 属性は、2 つの値がスラッシュ (/) で区切られている限り、水平半径と垂直半径 を個別に 指定できます。 )

これを書いた後、編集者はもう一度尋ねます: 四分の一楕円を実現するにはどうすればよいですか?


構造

<div class="box">    <!-- 半椭圆内容 --></div>
スタイル

.box {  width: 256px;  height: 160px;  background-color: #fb3;  border-radius:  100% 0 0 0;}
説明: 4 分の 1 楕円を作成するために満たすべき条件、

いずれかのレベル角と垂直半径の値は 100% に設定され、他の 3 つの角は 0 に設定されます

《CSS SECRETS》

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。