今天看了有關css的文章，雖然現在用css經常用，但有些東西還是值的自己記錄下的，這裏簡單列舉下;這裏講一個比較新的函數 conic-gradient()是屬於css-images-4的一位新成員。就是可以實現不同角度漸變色的一個函數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body,
div {
margin: 0;
padding: 0;
}
.caihong {
width: 300px;
height: 300px;
background: conic-gradient( #9ED110,
#50B517,
#179067,
#476EAF,
#9f49ac,
#CC42A2,
#FF3BA7,
#FF5800,
#FF8100,
#FEAC00,
#FFCC00,
#EDE604);
border-radius: 50%;
cursor: pointer;
transition: all 0.5s ease;
filter: hue-rotate(0deg);
}
.caihong:hover {
filter: hue-rotate(180deg);
}
</style>
</head>
<body>
<!-- 1.基本選擇器
類型選擇器：簡單來說就是直接選擇HTML標籤（不帶<>的那種），例如：html {width: 100%;};
類選擇器：就是HTML標籤中class屬性的值（但就是給每個值加上了.），例如：.div {width: 100%;};
ID選擇器：就是HTML標籤中id屬性的值（但就是給每個值加上了#，但是要注意，一個文檔中的ID應是唯一的，但能不能寫多個？其實也是可以，只是不建議這麼做，至於爲什麼，後面的文章會進行講解）;
通用選擇器：寫個 *，啥HTML標籤都選中了。例如：* {width: 100%;}
屬性選擇器：就是根據HTML標籤裏的屬性選擇，語法大概如下：
[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] -->
<!-- 2.組合選擇器
空格：後代選擇器，例如：.a .b。在例子中選中的就是.a裏面的所有帶有.b的節點；
>：子代選擇器，例如：.a > .b。在例子中選中的就是.a裏面的所有帶有.b的子節點；
~：後繼選擇器，例如：.a ~ .b。在例子中選中的就是在.a後面的.b；
+：直接後繼選擇器，例如：.a + .b。在例子中選中的就是在.a後面下一個.b；
|: 命名空間選擇器，例如：.a | .b。在例子中選中的就是屬於.a的.b，跟.a .b一樣，屬於Selectors Leve 3的內容。
||：列選擇器，例如：.a || .b。在例子中選中的就是由.a表示的列的網格/表中的單元格的.b，屬於Selectors Level 4的內容。 -->
<!-- 3.CSS的函數
根據w3cplus中可以劃分爲以下幾類：
屬性函數：attr()；
背景圖片函數：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
顏色函數：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
圖形函數：circle()、ellipse()、inset()、polygon()、path()
濾鏡函數：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
轉換函數：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
數學函數：calc()、min()、max()、mixmax()、repeat()；
緩動函數：cubic-bezier()、steps()；
其他函數：counter()、counters()、toggle()、var()、 symbols()。 -->
<!-- 這裏講一個比較新的函數 conic-gradient()是屬於css-images-4的一位新成員。就是可以實現不同角度漸變色的一個函數。 -->
<!-- 例子 -->
<div class="caihong"></div>
</body>
</html>
