CSS3圓角和漸變2種常用功能詳解

2022-09-25 05:51:14 字數 2370 閱讀 2133

圓角語法:border-radius:圓角值;

css3圓角的優點

傳統的圓角生成方案,必須使用多張作為背景圖案。css3的出現,使得我們再也不必浪費時間去製作這些了,而且還有其他多個優點:

* 減少維護的工作量。檔案的生成、更新、編寫網頁**,這些工作都不再需要了。

* 提高網頁效能。由於不必再發出多餘的http請求,網頁的載入速度將變快。

* 增加視覺可靠性。某些情況下(網路擁堵、伺服器出錯、網速過慢等等),背景會**失敗,導致視覺效果不佳。css3就不會發生這種情況。

這個值www.cppcns.com可以使用:em ,ex,pt,px,百分比;

border-radius跟margin,padding差不多

border-radius:lefttop,righttop,rightbottom,leftbottom。

複製**

**如下:

.box1

複製**

**如下:

.box2

對於圓角理解起來應該,很簡單。

對於百分比:目前最安全的做法,就是將每個圓角邊框的風格和寬度,都設為一樣的值,並且避免使用百分比值。

ie9以下是不支援此屬性

線性漸變:background:linear-gradient(設定漸變形式,第乙個顏色起點,中間顏色點 中間顏色的位置,結束點顏色);

linear:漸變的型別(線性漸變);

漸變的形式:可選引數 有兩種方式-1、設定旋轉角度,0度代表水平從左到右,90度就是從上到下啦,從0度開始逆時針變換。

2、使用關鍵字,left代表從左到右,top代表從上到下,同理right就是從右到左,lefttop-從坐上到右下,同理leftbottom,righttop,rightbottom。

中間顏色與中間顏色位置為可選引數。

不過要考慮瀏覽器的相容,咱們這樣寫:

-webkit-gradient(linear,0 0,0 100%,from(起始顏色,to(結束顏色)); /*for safari4+,chrome 2+*/

-webkit-linear-gradient(起始顏色, 結束顏色); /*for safari 5.1+,chrome 10+*/

-moz-linear-gradient(起始顏色, 結束顏色); /*for firefox*/

-o-linear-gradient(起始顏色, 結束顏色); /*opera*/

linear-gradient(起始顏色, 結束顏色); /*標準屬性*/

對於ie來說是個麻煩事,老辦法

filter:progid:dximagetransform.microsoft.gradient(startcolorstr=』 起始顏色』,endcolorstr=」 結束顏色」); /*ie6,ie 7*/

-ms-linear-gradient(起始顏色, 結束顏色); /*ie8*/

複製**

**如下:

.content1

.tit1

重複性線性漸變:repeating-linear-gradient屬性來代替線性漸變linear-gradie程式設計客棧nt;

複製**

**如下:

.content2

徑向漸變:radi程式設計客棧al-gradient(設定漸變的中心,漸變形狀 漸變大小,起始顏色值,中間顏色值 中間顏色位置,終點顏色)

漸變中心,可選引數,如30px 20px指距離左側30px距離上側20px,可以是畫素,可以是百分比,也可以是關鍵字,預設為中心位置。

漸變形狀,可選引數,可以取值circle或eclipse【預設】

漸變大小,可迴圈引數,可以取值

closest-side:

指定徑向漸變的半徑長度為從圓心到離圓心www.cppcns.com最近的邊

closest-corner:

指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side:

指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

farthest-corner:

指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

contain:

包含,指定徑向漸變的半徑長度為從圓心到離圓心最近的點。類同於closest-side

cover:

覆蓋,指定徑向漸變的半徑長度為從圓心到離圓心最遠的點。類同於farthest-corner

circle farthest-corner圓形漸變,ellipse farthest-corner橢圓漸變

複製**

**如下:

.content3

本文標題: css3圓角和漸變2種常用功能詳解

本文位址:

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 含義是 邊框半徑 你為這個屬性提供乙個值,就...