ホームページ > 記事 > ウェブフロントエンド > すべてのブラウザと互換性のある角丸長方形エフェクトのコード例_html/css_WEB-ITnose
すべてのブラウザと互換性のある角丸長方形エフェクトのコード例_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:21831ブラウズ
すべてのブラウザと互換性のある角丸長方形効果コードの例:
CSS3 には角丸を定義するための非常に便利な属性が与えられていますが、残念ながら IE ブラウザでは互換性が非常に低いため、紹介しません。詳細については、CSS3 で角を丸くする方法に関する章を参照してください。互換性の問題のため、角を丸くする効果を実現するには、いくつかの特別なメソッドを使用する必要があります。そのようなコードの例を次に示します。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>div+CSS圆角矩形</title><style type="text/CSS">body{ padding:20px; background-color:#FFF; font:100.01% "Trebuchet MS",Verdana, Arial,sans-serif}div#nifty{ margin:0 10%; background:#9BD1FA}p{padding:10px}div.rtop, div.rbottom{ display:block; background:#FFF}div.rtop div, div.rbottom div{ display:block; height:1px; overflow:hidden; background:#9BD1FA}div.r1{margin: 0 5px}div.r2{margin: 0 3px}div.r3{margin: 0 2px}div.rtop div.r4, div.rbottom div.r4{ margin:0 1px; height:2px}</style></head><body><div id="nifty"> <div class="rtop"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div class="r4"></div> </div> <p>蚂蚁部落欢迎您！</p> <div class="rtop"> <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div></div></body></hmtl> 上記のコードは少し面倒ですが、角が丸い効果を実現するのに非常に優れています。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=9521
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。