搜尋
首頁web前端css教學常用的顏色漸層方法總結

常用的顏色漸層方法總結

Mar 22, 2018 pm 04:18 PM
總結方法漸變

這次帶給大家常用的顏色漸層方法總結,讓顏色漸層方法的注意事項有哪些,以下就是實戰案例,一起來看一下。

一、線性漸進:linear-gradient

語法:

        = linear-gradient([ [ | to [, ]+)
       = [left | right] || [top | bottom]
         = [ | = [ |]?

;

#下述值用來表示漸變的方向,可以用角度或關鍵字來設定:

    :用角度值指定漸層的方向(或角度)。

        to left:設定漸層為由右至左。相當於: 270deg

        to right:設定漸進式從左到右。相當於: 90deg

        to top:設定漸進式從下往上。相當於: 0deg

        to bottom:設定漸進式從上到下。相當於: 180deg。這是預設值,等同於留空不寫。

    用於指定漸層的起止顏色:

       :指定顏色。

       :以長度值指定起止色位置。不允許負值

       :以百分比指定起止色位置。

範例:

p {  
    width: 200px;  
    height: 100px;  
    margin: 10px 5px;  
    border: 1px solid #ddd000;  
}  
#LinearStartToEnd {  
  float:left;  
  background: linear-gradient(#ff0000, #00ff00);  
}  
#LinearPercentage {  
  float:left;  
  background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);  
}  
#LinearAnglePercentage {  
  float:left;  
  background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);  
}  
#LinearAngle {  
  float:left;  
  background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);  
}  
#LinearTopRight {  
  float:left;  
  background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);  
}

二、徑向漸層:radial-gradient

#語法:

     position> = [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]?     = circle | ellipse
;ltpse> ||]
     = closest-side | closest-corner | farthest-side | 週末;
     = [ | ]{2}
     = <)
     = <ltlength> = radial-gradient([ [ || ] [ at ]? , | at , ]?[[[]] at , ]?[[[ , ]]+)

       確定圓心的位置。若提供2個參數,第一個表示橫座標,第二個表示縱座標;若只提供一個,第二值預設為50%,即center

         ①:以長度值指定徑向漸層圓心的橫座標值。可以為負值。

         ①:以百分比指定徑向漸層圓心的橫座標值。可以為負值。

         ②:以長度值指定徑向漸層圓心的縱座標值。可以為負值。

         ②:以百分比指定徑向漸層圓心的縱座標值。可以為負值。

              center①:设置中间为径向渐变圆心的横坐标值。

              center②:设置中间为径向渐变圆心的纵坐标值。

              left:设置左边为径向渐变圆心的横坐标值。

              right:设置右边为径向渐变圆心的横坐标值。

              top:设置顶部为径向渐变圆心的纵坐标值。

              bottom:设置底部为径向渐变圆心的纵坐标值。

       确定圆的类型

              circle:指定圆形的径向渐变

              ellipse:指定椭圆形的径向渐变。

       circle | ellipse 都接受该值作为 size。

              closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边。

              closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角。

              farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边。

              farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角。

       circle 接受该值作为 size。

              :用长度值指定正圆径向渐变的半径长度。不允许负值。

       ellipse 接受该值作为 size。

             :用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

             :用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

示例:

#RadialCenterCircle {  
  float:left;  
    background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);  
}  
#RadialClosestSide {  
  float:left;  
    background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);  
}  
#RadialFarthestSide {  
  float:left;  
    background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);  
}  
#RadialRightTop {  
  float:left;  
    background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);  
}  
#RadialRadiusCenter {  
  float:left;  
    background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);  
}  
#RadialGroup {  
  float:left;  
    background:  
        radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),  
        radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);  
}

三、重复的线性渐变:repeating-linear-gradient

语法和参数类似线性渐变,这里不在赘述。详情请参考CSS手册。

示例:

#RepeatingLinearPercentage{  
  float:left;  
    background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearRight {  
  float:left;  
    background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearAngle {  
  float:left;  
    background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingLinearBottomLeft {  
  float:left;  
    background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);  
}

四、重复的径向渐变:repeating-radial-gradient

语法和参数类似径向渐变,这里不在赘述。详情请参考CSS手册。

示例:

#RepeatingRadialCircle {  
  float:left;  
    background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingRadialTopLeft {  
  float:left;  
    background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);  
}  
#RepeatingRadialClosestCorner {  
  float:left;  
    background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);  
}

完整的例子:

nbsp;html>  
  
  
<meta>  
<title>ImageCSS3</title>  
<style>  
p {  
    width: 200px;  
    height: 100px;  
    margin: 10px 5px;  
    border: 1px solid #ddd000;  
}  
#LinearStartToEnd {  
  float:left;  
  background: linear-gradient(#ff0000, #00ff00);  
}  
#LinearPercentage {  
  float:left;  
  background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);  
}  
#LinearAnglePercentage {  
  float:left;  
  background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);  
}  
#LinearAngle {  
  float:left;  
  background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);  
}  
#LinearTopRight {  
  float:left;  
  background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);  
}  
  
#RadialCenterCircle {  
  float:left;  
    background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);  
}  
#RadialClosestSide {  
  float:left;  
    background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);  
}  
#RadialFarthestSide {  
  float:left;  
    background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);  
}  
#RadialRightTop {  
  float:left;  
    background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);  
}  
#RadialRadiusCenter {  
  float:left;  
    background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);  
}  
#RadialGroup {  
  float:left;  
    background:  
                radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),  
                radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);  
}  
  
#RepeatingLinearPercentage{  
  float:left;  
    background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearRight {  
  float:left;  
    background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearAngle {  
  float:left;  
    background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingLinearBottomLeft {  
  float:left;  
    background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);  
}  
  
#RepeatingRadialCircle {  
  float:left;  
    background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingRadialTopLeft {  
  float:left;  
    background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);  
}  
#RepeatingRadialClosestCorner {  
  float:left;  
    background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);  
}  
  
</style>  
  
  
<!-- 指定线性渐变起止色 -->  
<p></p>  
<!-- 指定线性渐变起止色位置 -->  
<p></p>  
<!-- 指定线性渐变颜色渐变方向和起止色位置 -->  
<p></p>  
<!-- 指定线性渐变颜色渐变方向 -->  
<p></p>  
<!-- 设置渐变从右上到左下 -->  
<p></p>  
  
<!-- 浮动p换行,此处指定p宽高和边界,是为了覆盖前面定义的p统一CSS样式,  
 可以尝试去掉指定的p宽高和边界,看看效果 -->  
<p></p>  
<!-- 以中心点为圆心的圆形径向渐变 -->  
<p></p>  
<!-- 径向渐变半径长度:圆心到离圆心最近边的长度 -->  
<p></p>  
<!-- 径向渐变半径长度:圆心到离圆心最远边的长度 -->  
<p></p>  
<!-- 左边为径向渐变圆心的横坐标值,顶边为径向渐变圆心的纵坐标值 -->  
<p></p>  
<!-- 同时指定径向渐变的圆心和半径 -->  
<p></p>  
<!-- 径向渐变组合 -->  
<p></p>  
  
<p></p>  
<!-- 指定颜色起止色位置的重复线性渐变 -->  
<p></p>  
<!-- 从左到右渐变的重复线性渐变 -->  
<p></p>  
<!-- 渐变角度为45度的重复线性渐变 -->  
<p></p>  
<!-- 从左下到右上的重复线性渐变 -->  
<p></p>  
  
<p></p>  
<!-- 圆形重复径向渐变 -->  
<p></p>  
<!-- 渐变方向为左上到右下的重复径向渐变 -->  
<p></p>  
<!-- 重复径向渐变:渐变半径长度为从圆心到离圆心最近的角的距离 -->  
<p></p>  
  
  

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

IE8下的nth-child()兼容问题如何处理

CSS3的blur白边怎么去除

IE6下相容問題的解決方案

#

以上是常用的顏色漸層方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
我們如何標記Google字體並創建Goofonts.com我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目,它們都是版式的忠實擁護者。我們一直在標記Google

永恆的Web開發文章永恆的Web開發文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人們詢問了他們認為是關於網絡開發的一些最永恆的文章的建議

與部分元素的交易與部分元素的交易Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章:

使用JavaScript API練習GraphQl查詢使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM

學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API!碰巧的是,我得到了完美的

組件級CMS組件級CMSApr 12, 2025 am 11:09 AM

當一個組件生活在數據查詢居住在附近的數據查詢的環境中時,視覺組件和

將類型設置在圓上...帶偏移路徑將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM

這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時,它被稱為Motion-Path,然後被更名。我

'恢復”在CSS中有什麼作用?'恢復”在CSS中有什麼作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla開發人員的視頻中解釋了該主題。

現代戀人現代戀人Apr 12, 2025 am 10:58 AM

我喜歡這樣的東西。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。