検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS は角丸の DIV を定義します border_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 12:30:071207ブラウズ

用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;

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ps+div+css は青色の背景を作成します -- ログイン ページ design_html/css_WEB-ITnose次の記事：ps+div+css は青色の背景を作成します -- ログイン ページ design_html/css_WEB-ITnose

関連記事

続きを見る