コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSS は角丸の DIV を定義します border_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:30:07
オリジナル
1192 人が閲覧しました

用CSS样式，比js好

有的浏览器会禁止执行脚本，那样就无效了

CSS就不会

css圆角效果

无图片实现圆角框



无图片实现圆角框

=================================================================

另外一种实现方式

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数
作者

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2


style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:
RoundCorner("欲圆角的元素ID"

[, 圆角样式 ]);
圆角样式:可选参数,暂时有4种

<SCRIPT></p> <p>RoundCorner("round1",1);</p> <p>RoundCorner("round2",2);</p> <p>RoundCorner("round3",3);</p> <p>RoundCorner("round4",4) ;</p> <p>RoundCorner("a",1);</p> <p>RoundCorner("title",1);</p> <p>function RoundCorner(obj,style)</p> <p>{ var r = [];</p> <p> var style = [</p> <p> {上:["0 5px","0 3px","0 2px","0 1px","0 1px"],下:["0 1px","0 1px","0 2px","0 3px" ","0 5px"]},</p> <p> {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px ","0px","0px","0px"] },</p> <p> {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px", "0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},</p> <p> {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px", "0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}</p> <p> ]; //作者: longbill.cn</p> <p> if (!style || style>styles.length) style = 1;</p> <p> style--;</p> <p> var btop =styles[style].top,bbottom =styles[style]. Bottom;</p> <p> obj = document.getElementById(obj);</p> <p> if (!obj) return;</p> <p> var HTML = obj.innerHTML;</p> <p> obj.innerHTML = "";</p> <p> for(var istop=1;istop&gt ;=0;istop--)</p> <p> {</p> <p> var topborder = document.createElement("b");</p> <p> topborder.style.display = "block";</p> <p> topborder.style.height = "2px";</p> <p> topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";</p> <p> for(var i=0;i<btop.length;i++)</p> <p> { </p> <p> var b = document.createElement("b");</p> <p> if (obj.style.backgroundColor)</p> <p> b.style.backgroundColor = obj.style.backgroundColor;</p> <p> else if (obj.className)</p> <p> b .className = obj.className;</p> <p> b.style.display = "block";</p> <p> b.style.margin = (istop)?btop[i]:bbottom[i];</p> <p> b.style.height = " 1px";</p> <p> b.style.overflow = "hidden";</p> <p> b.style.width = "auto";</p> <p> topborder.appendChild(b);</p> <p> }</p> <p> obj.appendChild(topborder);</p> <p> if (istop) obj.innerHTML+=HTML;</p> <p> }</p> <p>}</p> <p></SCRIPT>

============= ================================================= ==

新建网页



< br>

  • ナレッジ >padding:10px;">魅力的な Web ページの作成に役立つリソースにアクセスするには、以下のリンクを使用してください。 ＆lt; br＆gt; dynamic html（dhtml）オブジェクトモデルリファレンス＆lt; br＆gt;＆lt;/div＆gt;

関連ラベル：
CSS定义DIV圆角边框
ソース：php.cn
前の記事：ps+div+css は青色の背景を作成します -- ログイン ページ design_html/css_WEB-ITnose 次の記事：左列と右列の共通の div+css レイアウト テクニック Organized_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
2
1842
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2013
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1695
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1596
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1613
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート