HTML
width:400px; height:220px; border-radius:50%; background:radial-gradient(ellipse at 35% 25%, #fff 0 , #ccc 20% , #999 40%, #000 90% , #666 95% , #999 100%);; 同心圓效果。
width:150px;height:150px;border-radius:50%; background:radial-gradient(ellipse at 35% 25%, #fff 0,#ccc 20%,#999 40%,#000 90%,#666 95%,#999 100%); 透過漸層色模擬一個立體的橢球。
background:radial-gradient(circle at 25% 25% , yellow 5% , orangered 1%, aqua 10% , lightskyblue 40%, skyblue 95% , dodgerblue 100%)
background:linear-gradient(90deg, lime 0%, lime 10%, orange 15%, orange 25%, aqua 30%, aqua 40%, green 45%, green 55%, blue 60%, blue 70%, indigo 75%, indigo 85%); 設定不要重疊每個顏色的位置,才看見邊緣出現漸層的顏色。
分別是:repeating-radial-gradient:放射重複漸層, repeating-linear-gradient:線性重複漸層, repeating-conic-gradient :圓錐形重複漸層,
background:repeating-linear-gradient(45deg,ivory 0, ivory 5%, bisque 5%, bisque 10%, cornsilk 10%, cornsilk 15% );
background:repeating-radial-gradient(circle, #000 0, #000 5%, #f90 5%, #f90 10%, #a50 18%);
background:repeating-conic-gradient(#f00 0, #f00 15deg, #fa0 15deg, #fa0 30deg );
background:repeating-conic-gradient( khaki 0, khaki 90deg, aqua 90deg, aqua 180deg); background-size:10% 20%
沒有留言:
張貼留言