ホームページ > 記事 > ウェブフロントエンド > border-radius を使用せずに、適応的な高さと幅を持つ再利用可能な角丸長方形を実装します_html/css_WEB-ITnose
border-radius を使用せずに、適応的な高さと幅を持つ再利用可能な角丸長方形を実装します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:521389ブラウズ
CSS3 は角丸長方形をサポートするようになりましたが、互換性の問題のため、面倒ではありますが、それでも次の方法を理解する必要があります。
div には 8 つの div が含まれます。これら 8 つの div の高さ、マージン、境界線の属性値を制御して角丸四角形の効果を実現しますが、div の順序に注意してください。
html コード:
rree
css コード:
<body> <div class="bor"> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <div class="b4"></div> </div> <div class="mid"> <p>不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形</p> </div> <div class="bor"> <div class="b4"></div> <div class="b3"></div> <div class="b2"></div> <div class="b1"></div> </div></body>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。