css中linear-gradient()函數是做什麼的？實現線性漸層的圓形邊框（代碼）
- 青灯夜游原創
- 2018-09-20 11:32:574011瀏覽
在前端開發過程中，有時會利用linear-gradient實現各種各樣的效果，本章來介紹css中linear-gradient()函數是做什麼的？實現線性漸變的圓形邊框（代碼）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、css linear-gradient()是什麼？
1.定義
css linear-gradient函數，用於建立一個線性漸變的 "映像"。
2.用法
為了建立一個線性漸變，你需要設定一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，而且你必須指定至少兩種，當然也會可以指定更多的顏色去創造更複雜的漸層效果。
範例（指定3種終止色）：
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(red,yellow,blue); /* 标准语法 */
效果圖：
%E5%87%BD%E6%95%B8%E6%98%AF%E5%81%9A%E4%BB%80%E9%BA%BC%E7%9A%84%EF%BC%9F%E5%AF%A6%E7%8F%BE%E7%B7%9A%E6%80%A7%E6%BC%B8%E5%B1%A4%E7%9A%84%E5%9C%93%E5%BD%A2%E9%82%8A%E6%A1%86%EF%BC%88%E4%BB%A3%E7%A2%BC%EF%BC%89 "153741154572526css中linear-gradient()函數是做什麼的？實現線性漸層的圓形邊框（代碼）")
#範例裡沒有指定一個方向來實現線性漸變，因此是預設的從上而下來實現效果，也可以指定一個方向（角度）來實現效果，例：
#指定一個方向（從左往右）：
background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */
%E5%87%BD%E6%95%B8%E6%98%AF%E5%81%9A%E4%BB%80%E9%BA%BC%E7%9A%84%EF%BC%9F%E5%AF%A6%E7%8F%BE%E7%B7%9A%E6%80%A7%E6%BC%B8%E5%B1%A4%E7%9A%84%E5%9C%93%E5%BD%A2%E9%82%8A%E6%A1%86%EF%BC%88%E4%BB%A3%E7%A2%BC%EF%BC%89 "153741189372411css中linear-gradient()函數是做什麼的？實現線性漸層的圓形邊框（代碼）")
指定一個方向（45度角）：
background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */
#同時，也可以實現漸層透明的效果（定義一個透明度）：
background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/
%E5%87%BD%E6%95%B8%E6%98%AF%E5%81%9A%E4%BB%80%E9%BA%BC%E7%9A%84%EF%BC%9F%E5%AF%A6%E7%8F%BE%E7%B7%9A%E6%80%A7%E6%BC%B8%E5%B1%A4%E7%9A%84%E5%9C%93%E5%BD%A2%E9%82%8A%E6%A1%86%EF%BC%88%E4%BB%A3%E7%A2%BC%EF%BC%89 "153741279368080css中linear-gradient()函數是做什麼的？實現線性漸層的圓形邊框（代碼）")
二、css設定線性漸變的圓形邊框（程式碼）
#原則：
先製作兩個的正方形，大小不一，疊在一起
%E5%87%BD%E6%95%B8%E6%98%AF%E5%81%9A%E4%BB%80%E9%BA%BC%E7%9A%84%EF%BC%9F%E5%AF%A6%E7%8F%BE%E7%B7%9A%E6%80%A7%E6%BC%B8%E5%B1%A4%E7%9A%84%E5%9C%93%E5%BD%A2%E9%82%8A%E6%A1%86%EF%BC%88%E4%BB%A3%E7%A2%BC%EF%BC%89 "153741332837256css中linear-gradient()函數是做什麼的？實現線性漸層的圓形邊框（代碼）")
使用邊框圓角屬性：border-radius設定邊框的圓角度為100%
在使用linear-gradient()添加外圍圓形的漸變色，就製作了：
%E5%87%BD%E6%95%B8%E6%98%AF%E5%81%9A%E4%BB%80%E9%BA%BC%E7%9A%84%EF%BC%9F%E5%AF%A6%E7%8F%BE%E7%B7%9A%E6%80%A7%E6%BC%B8%E5%B1%A4%E7%9A%84%E5%9C%93%E5%BD%A2%E9%82%8A%E6%A1%86%EF%BC%88%E4%BB%A3%E7%A2%BC%EF%BC%89 "153741363491248css中linear-gradient()函數是做什麼的？實現線性漸層的圓形邊框（代碼）")
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框渐变的圆形</title>
<style>
.border1{
width: 200px;
height: 200px;
margin:100px auto;
position: relative;
border: 1px solid transparent;
border-radius: 100%;
background: white;
background-clip: padding-box;
padding: 10px;
}
.border1::after{
position: absolute;
top: -40px;
bottom: -40px;
left: -40px;
right: -40px;
background: linear-gradient(45deg,red, blue);
content: '';
z-index: -1;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="border1"></div>
</body>
</html>實例很簡單，大家可以動手實作一下，也可以在這個基礎上做出修改，例如：半圓.....
以上是css中linear-gradient()函數是做什麼的？實現線性漸層的圓形邊框（代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：淺談CSS載入失敗的6個原因下一篇：淺談CSS載入失敗的6個原因