コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > すべてのブラウザと互換性のある角丸長方形エフェクトのコード例_html/css_WEB-ITnose

すべてのブラウザと互換性のある角丸長方形エフェクトのコード例_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:31:21
オリジナル
906 人が閲覧しました

すべてのブラウザと互換性のある角丸長方形効果コードの例:
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/

関連ラベル：
兼容所有浏览器的圆角矩形效果代码实例
ソース：php.cn
前の記事：cache_html/css_WEB-ITnoseにより画像の更新が間に合わない問題の解決方法 次の記事：center_html/css_WEB-ITnose でテキストを縦方向に配置する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2190
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2340
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1963
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1850
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1908
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート