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

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

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

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

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

新建网页

ナレッジ >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

続きを見る

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

関連記事