css3 背景漸變

psychola 發布于2019-08-28 17:58 / 2856人閱讀

摘要：之前，必須依賴等圖形處理軟件來制作漸變圖，再以背景圖片方式添加給元素。而現在，使用就可以創造出各種漸變效果了。漸變是幫我們生成的背景圖片。

CSS3 之前，必須依賴 Adobe Photoshop 等圖形處理軟件來制作漸變圖，再以背景圖片方式添加給元素。而現在，使用 CSS就可以創造出各種漸變效果了。漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性

CSS 規則如下。

/*為元素盒子添加樣式*/ 
div { 
 height:150px; 
 width:200px; 
 border:1px solid #ccc; 
 float:left; 
 margin:16px; 
} 

/*例 1：默認為從上到下*/ 
.gradient1 { 
 background:linear-gradient(#e86a43, #fff); 
} 

/*例 2：從左到右*/ 
.gradient2 { 
 background:linear-gradient(left, #64d1dd, #fff); 
} 

/*例 3：左上到右下*/ 
.gradient3 { 
 background:linear-gradient(-45deg, #e86a43, #fff); 
}

放射性漸變

在創建放射性漸變時，可以使用參數指定形狀、位置、尺寸、顏色和不透明度

.gradient1 { 
 background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25); 
} 
.gradient2 { 
 background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43); 
} 
.gradient3 { 
 background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, 
#4947ba); 
}

GPU云服務器云服務器背景漸變網頁背景漸變背景色漸變 css3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110929.html

css3文字顏色動態漸變

摘要：是因為動畫的結束后的最后一幀的顏色為，立馬會重新執行動畫，顏色會初始到第一幀，所以會有明顯的變化。的效果就是背景顏色被剪裁到文字上面，只有文字會顯示背景顏色。用數字表達結合以上三個屬性結合動畫，最終實現文字漸變的效果。瀏覽 Animate.css官網的時候發現Animate.css這幾個字母的顏色會慢慢變化，個人覺得還是很有意思，本以為是利用animate 改變color,結果F1...

Cciradih 2019-08-29 13:56 評論0 收藏0
CSS3新特性的概述

摘要：的新特性大致分為以下六類選擇器邊框與圓角背景與漸變過渡變換動畫下面分別說一說以上六類都有哪些內容選擇器基本選擇器基本選擇器又分為子選擇器相鄰兄弟選擇器通用兄弟選擇器群組選擇器屬性選擇器為帶有屬性的元素設置樣式為屬性的元素設置樣式選擇屬性值包 CSS3的新特性大致分為以下六類 1.CSS3選擇器 2.CSS3邊框與圓角 3.CSS3背景與漸變 4.CSS3過渡 5.CSS3變換 ...

Zachary 2019-08-29 13:17 評論0 收藏0
CSS學習筆記(七) 背景

摘要：任何方向上都不重復只讓背景圖片顯示一次。，背景圖片就會以段落的中心點為起點。第一個值表示水平位置，第二個值表示垂直位置。拉大圖片，使其完全填滿背景區保持寬高比。提示漸變是幫我們生成的背景圖片。在CSS里面，每個元素盒子都可以想象成由兩個圖層組成。前景層：內容（如文本或圖片）和邊框。背景層：用實色填充（使用 background-color 屬性），也可以包含任意多個背景圖片（...

Pikachu 2019-08-28 18:03 評論0 收藏0
CSS3漸變效果工具

摘要：推薦一個漸變效果工具，覺得有幫助的可以收藏下。工具鏈接漸變可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。推薦一個css3漸變效果工具，覺得有幫助的可以收藏下。工具鏈接 CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。CSS3 定義了兩種類型的漸變（gradients）：線性漸變（Linear Gradients）- 向下/向上/向左/...

toddmark 2019-08-30 15:53 評論0 收藏0