Question to say "I can!"

使用 CSS3 實現圓角效果

2011-12-19

圓角賦予人們美麗的感覺,因為圓潤讓人遐想。

那么,如何實現呢?

我來看看她的代碼:

<div style="color: #556677; line-height: 160%; padding: 0.3em 0.5em; border: 1px solid #d3d3d3; margin: 1em; background-color: #aad2f0; border-radius: 10px 10px 10px 10px;">

其他的都沒問題,關鍵就是border-radius: 10px 10px 10px 10px;這個控制邊框圓角的代碼。

設置完后,的效果如下:

文檔信息

還有:

W3C 很早就制訂了實現了 CSS 圓角的 CSS3 屬性:border-radius,Firefox 和 Safari 也通過私有屬性實現了該功能:

代碼非常簡單:


<div style=" background-color: #ccc; -moz-border-radius: 5px;  -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >Firefox 和 Safari 實現圓角</div>

效果如下:

Firefox 和 Safari 使用私有屬性實現圓角效果

其中 -moz-border-radius 是 Firefox 實現圓角的私有屬性,而 -webkit-border-radius 是 webkit 內核瀏覽器(如 Safari 和 Chrome)實現圓角的私有屬性,如果你只要指定某一個角是圓角的話,它們都分別定義了四個屬性:

-moz-border-radius-topleft / -webkit-border-top-left-radius

-moz-border-radius-topright / -webkit-border-top-right-radius

-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius

-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

當然 IE9 以下版本還是不支持,所以該效果只能在 IE9, Firefox, Safari, 以及 Chrome 中查看。

最新的 IE9 已經支持 CSS3 圓角。

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 内蒙古11选五内蒙古11 重庆时时彩投注软件 河南高频11选五开奖 重庆时时彩软件分析 股票融资通俗的讲是什么意思 股票开盘时间是几点 江苏十一选五开奖遗漏 企业如何从股票融资 七位数推荐号码预测 贵州快三玩法中奖介绍 体彩贵州11选五 深圳风采玩法介绍 内蒙古快三预测号码 天赐材料股票股吧 广东省快乐10分走势图 机器人股票行情