矩形圓角代碼js（圓角代碼是什麼）

• 1、web中如何實現圓角矩形？是不是有個叫border-radious??
• 2、html/css利用背景圖截取功能，實現圓角矩形
• 3、CSS圓角矩形設置
• 4、怎麼設置processing圓角矩形代碼
• 5、使用JQuery怎麼實現鼠標移上去背景變圓角矩形?
• 6、有沒有一種js代碼可以使div變成圓角邊框

利用 CSS3 的 border-radius 屬性能夠令網頁元素表現圓角,雖然目前絕大多數的瀏覽器都已經支持 border-radius 屬性，而老式的IE瀏覽器們如 IE6、IE7 或 IE8 是不支持 border-radious 屬性的。

但可以用一個js插件“CurvyCorners”解決。

通常，要使用網頁中的某些元素呈現圓角，我可以使用 CSS3 的 border-radious 屬性，在需要顯示圓角的CSS元素中添加如下的屬性值即可，如：

#wrapper{

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 8px;

border: 1pxsolid#333;

}

Firefox, Safari 和 Chrome 等瀏覽器默認支持這些屬性，但是，對於 IE9 以下的舊版 IE 來說，它們就會無視（不支持）以上的 CSS 屬性，那怎麼辦呢？方法是有的，而且也相當簡單。

首先下載一個小小的 js文件 Curvy Corners 到桌面上，解壓縮，將其中的 curvycorners.js 文件放到網站目錄.

在頁面中使用curvycorners.js 實現圓角功能：

在head節點中加入如下代碼：

script type=”text/JavaScript” src=”../curvycorners.js”/script /*引入js*/

script type=”text/JavaScript”

curvyCorners.addEvent(window, ‘load’, initCorners);

function initCorners() {

var settings = {

tl: { radius: 20 },

tr: { radius: 20 },

bl: { radius: 20 },

br: { radius: 20 },

antiAlias: true

}

curvyCorners(settings, “#myBox”); /*myBox 為需要處理圓角的容器id*/

}

/script

把圖片當做背景圖片，利用偏移，background-position：定位需要顯示的位置，和顯示的寬、高，

CSS圓角矩形可以使用 Border-radius 屬性即可實現。

Border-radius 屬性相關定義功能及其案例：

對瀏覽器的支持：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。

定義和用法：border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。該屬性允許您為元素添加圓角邊框！

默認值：0；

繼承性：no；

版本：CSS3；

JavaScript 語法：object.style.borderRadius=”5px”。

語法：border-radius: 1-4 length|% / 1-4 length|%。

length：定義圓角的形狀。

%：以百分比定義圓角的形狀。

案例：

案例1：border-radius:2em;

等同於：

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

案例2：border-radius: 2em 1em 4em / 0.5em 3em;

等同於：

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em

注意事項：

按此順序設置每個 radii 的四個值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

HTML邊框圓角的實現代碼：CSS3中的border-radius；table{border-radius:5px;overflow:hidden}；如果需要單獨針對某一個角設置為圓角可以使用下面代碼：border-top-left-radius:5em;border-top-right-radius:5em;border-bottom-right-radius:5em;border-bottom-left-radius:5em;

如果是支持CSS3的瀏覽器，定義border-radius屬性，就是盒模型的邊界圓角，值越大越圓。

用jquery做的話，就是定義一個帶border-radius的class，然後選擇相應的元素，在hover事件中使用addClass方法添加這個class。

但是，這是不好的做法，或者說是dumb way。因為直接使用css的hover偽類就可以實現，完全不需要藉助jquery或者說js

例如你的這幾個div擁有一個class，title-div，那麼只需要

.title-div:hover {

border-radius: 8px;

}

就可以實現鼠標一上去圓角。

不過要是需要兼容IE6/7/8這種不支持CSS3特性的瀏覽器，就得使用CSS3Pie之類的庫，你可以搜索下，在官網上看看他介紹。

用CSS樣式吧，比js好

有的瀏覽器會禁止執行腳本，那樣就無效了

CSS就不會

html

head

titlecss圓角效果/title

meta http-equiv=”content-type” content=”text/html; charset=gb2312″

style type=”text/css”

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFFFFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

/style

/head

body

div class=”RoundedCorner”

b class=”rtop”b class=”r1″/bb class=”r2″/bb class=”r3″/bb class=”r4″/b/b

無圖片實現圓角框

b class=”rbottom”b class=”r4″/bb class=”r3″/bb class=”r2″/bb class=”r1″/b/b

/div

br

div class=”RoundedCorner”

b class=”rtop”b class=”r1″/bb class=”r2″/bb class=”r3″/bb class=”r4″/b/b

br無圖片實現圓角框brbr

b class=”rbottom”b class=”r4″/bb class=”r3″/bb class=”r2″/bb class=”r1″/b/b

/div

/body

/html