css3的圓角屬性

2021-09-01 10:57:19 字數 944 閱讀 7747

css3讓網頁設計者脫離,通過簡單的css屬性實現強大的頁面展現。這樣不僅僅減小了伺服器的請求壓力,同樣也會使網頁開啟速度明顯提高。

border-radius這個屬性,是標準的建立圓角的屬性,全面的支援chrome、firefox和safari.通常我們的寫法如下:

寫道border-radius: 10px; /* css3 property */ -moz-border-radius: 10px; /* firefox */ -webkit-border-radius: 10px; /* chrome/safari */ -khtml-border-radius: 10px; /* linux browsers */

這四個屬性理解起來很簡單。分別設定四個角的圓角弧度10px.你也能按照你的設計改變任何乙個角的弧度,跟padding、margin一樣,你能分別設定左上、右上、右下、左下四個角的弧度。  

寫道/* firefox */ -moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 30px;

-moz-border-radius-bottomleft: 0;

也能將四個屬性混合在一起使用。順序為:

[左上] [右上] [右下] [左下]順時針方向

寫道-moz-border-radius: 10px 20px 30px 0;

接下來,我們看在ie下面,這個屬性的用法。前段設計者都知道,在寫css時,ie是比較**的。要作為特殊進行處理。然而css3僅有部分屬性是支援ie9的,我們怎樣才能讓他在ie其他版本瀏覽器中無縫銜接呢?

寫道.corners

按照你的路徑,修改部署到伺服器上。這樣,就可以在ie其他版本下,放心的使用css3的圓角屬性了。。。

CSS教程 CSS3圓角屬性

ie 和 opera 就沒有私有的圓角屬性了,如果有的話,那製作圓角應該就簡單多了,把各自的私有屬性全部寫上,讓各個瀏覽器對號入座,就達到了相容的效果。隨著網路的發展,css 也在不斷的完lkzvt善,充分吸取多年來 web 發展的需求,提出了很多新穎的 css 特性,例如很受歡迎的圓角矩形lkzv...

CSS3 圓角屬性 border radius

在 css3 中新增了乙個 border radius 邊框半徑屬性,即大家常用的圓角效果。這使得製作圓角將不再麻煩,只需對所用物件加乙個 border radius 屬性即可,不必使用定位或冗餘 完成了。不過它的使用瓶頸目前也是顯而易見的,因為效果顯示需支援 css3 的現代瀏覽器,而在一些老版本...

CSS3 實現圓角方法

這裡只是稍微的翻譯下,希望大家能夠從中領悟。圓角效果,首先我們應該來建立乙個div和簡單的css吧。在css中,我們應該給他定義乙個寬度和高度,當然還有背景。box 2.這種情況比較特殊,是對左上角和右下角設定同一種圓角,而右上角和左下角是同一種圓角。box 3.這種情況也比較特殊,是左上角為20p...