通過前面內容的學習,我們清楚,塊級元素展示時,預設為矩形, 但這種方方正正的樣式,有時候不滿足我們在web頁面上的布局需求, 所以今天來講一下圓角樣式
所謂的圓角樣式: (border-radius) 是w3c制定出來, 使預設顯示為矩形的塊元素展示乙個弧形邊緣的樣式;
圓角樣式有如下幾個特性:
--> 可獨立設定四個角的圓角半徑;
--> 從左上角開始,順時針方向分別對應1,2,3,4,號引數;
--> 圓角樣式可分別設定各個角的x軸半徑和y軸半徑, x,y軸資料用 / 分開, x,y軸各自獨立設定,
--> 圓角樣式設定後,只影響對應角的樣式,不影響其它角的樣式;(即使所設定的圓角半徑已經覆蓋到了其它角的位置,也不會影響)
(即: 每個角的x軸圓角半徑<=元素寬度,y軸圓角半徑<=元素的高度)
--> 圓角樣式各引數值也可使用百分比進行設定, 百分比的基數為元素的寬度(x軸基數)和高度(y軸基數)
=> 漸變樣式: 指在元素的背景圖層中,新增多種不同顏色之間的過渡效果的樣式;
--> 漸變樣式應用為背景層,在背景顏色層之上,
--> 漸變樣式的分類: 線性漸變(linear-gradient)、徑向漸變(radial-gradient)
--> 注意區分 重複漸變色 和 背景平鋪的區別
線性漸變效果
徑向漸變效果
關於背景平鋪效果與重複漸變色效果
CSS3圓角詳解
全屏閱讀 收藏 一 css3圓角的優點 減少維護的工作量。檔案的生成 更新 編寫網頁 這些工作都不再需要了。提高網頁效能。由於不必再發出多餘的http請求，網頁的載入速度將變快。二 border radius屬性 css3圓角只需設定乙個屬性 border radius 含義是 邊框半徑 你為這個屬...
CSS3圓角詳解
css3圓角詳解 日期 2010年12月 9日 css3是樣式表 style sheet 語言的最新版本，它的一大優點就是支援圓角。css3圓角詳解 譯者 阮一峰 原文 發表日期 2010年12月8日 一 css3圓角的優點 減少維護的工作量。檔案的生成 更新 編寫網頁 這些工作都不再需要了。提高網...
關於CSS3圓角
一 css3圓角的優點 減少維護的工作量。檔案的生成 更新 編寫網頁 這些工作都不再需要了。提高網頁效能。由於不必再發出多餘的http請求，網頁的載入速度將變快。二 border radius屬性 css3圓角只需設定乙個屬性 border radius 含義是 邊框半徑 你為這個屬性提供乙個值，就...