溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css3新增的功能是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
漸變是css3新增的圖片類型，用來代替圖片。CSS3定義了兩種類型的漸變：1、線性漸變，使用“linear-gradient()”函數定義；2、徑向漸變，使用“radial-gradient()”函數定義。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
作為CSS3新增的屬性，漸變也有著無窮的潛力。
??漸變是CSS3新增的圖片類型，用來代替圖片，它的好處有：
加快頁面的加載速度，減少帶寬的占用；
更加靈活。
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
??其實漸變的使用也挺常見的，例如導航欄：
background-image: linear-gradient(90deg,#0af,#0085ff)
??很顯然，這比純色的背景好看太多了。
??當然，有時間我們并不需要過渡效果：
background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);
??對于線性漸變，除了linear-gradient，還有repeating-linear-gradient：
$c1: #fff; $c2: #DF5646; $c3: #1C78A4; background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);
??由此可見，漸變并沒有那么簡單。
??這里肯定有人要問，還能玩出什么花樣？首先我們要明白漸變是一種圖片，那么再想想還有什么與圖片一起使用的CSS屬性？
$color: #122556; background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%), linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%); background-size: 30px 30px;
??通過這個例子，是不是使用漸變的思路更加開闊了。不過這里還需要注意一點：
當你聲明多個漸變時，最先聲明的，離用戶越近。（這里就需要我們考慮遮蓋的問題，一般采用transparent）；
??同樣，漸變也可以做動畫
@mixin menuaction($color) {
background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
&:hover {
background-size: 100% 100%;
color: #fff;
}
}徑向漸變由它的中心定義。
為了創建一個徑向漸變，你也必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
語法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| 值 | 描述 |
|---|---|
| shape | 確定圓的類型:
|
| size | 定義漸變的大小，可能值：
|
| position | 定義漸變的位置。可能值：
|
| start-color, ..., last-color | 用于指定漸變的起止顏色。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* 瀏覽器不支持的時候顯示 */
background-image: radial-gradient(red, yellow, green); /* 標準的語法（必須放在最后） */
}
#grad2 {
height: 150px;
width: 200px;
background-color: red; /* 瀏覽器不支持的時候顯示 */
background-image: radial-gradient(circle, red, yellow, green); /* 標準的語法（必須放在最后） */
}
</style>
</head>
<body>
<h4>徑向漸變 - 形狀</h4>
<p><strong>橢圓形 Ellipse（默認）：</strong></p>
<div id="grad1"></div>
<p><strong>圓形 Circle：</strong></p>
<div id="grad2"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body>
</html>
??最后以什么結束呢，哈哈最近各種優惠券，那我們用漸變的知識來搞張優惠券吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 300px;
height: 120px;
background: radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
linear-gradient(90deg, transparent 10px, rgb(247, 245, 201) 10px);
background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%;
background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
“css3新增的功能是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
