CSS渐变背景看这一篇就够了
在我们自己设计网页的时候,为了好看美观,颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景,和一些常用的颜色网站。
CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩,看能玩出什么花来。
CSS 定义了两种渐变类型:
一、线性渐变(向下/向上/向左/向右/对角线)
我们通过属性 linear-gradient来这样定义一个线性渐变。
background-image: linear-gradient( 方向/角度 , 颜色1,颜色2,颜色3....);
例如:background-image: linear-gradient(45deg, #FF0000,#FFF200, #1E9600);
或者:background-image: linear-gradient(45deg, #FF0000 20%,#FFF200 50%, #1E9600 80%);
repeating-linear-gradient() 函数用于重复线性渐变
例如:background-image: repeating-linear-gradient(45deg, #F27121 20px, #E94057 30px, #8A2387 40px);
二、径向渐变(由其中心定义)
径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。有一种水波扩散的感觉。
我们通过 radial-gradient();来定义一个径向的渐变。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 为椭圆形,size 为最远角,position 为中心。
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse(椭圆)。
size 参数定义渐变的大小。它可接受四个值:
closest-side :从中心点向外扩展渐变,到离中心点最近的一边结束。
farthest-side :以离渐变中心点最远的那一边计算圆的半径
closest-corner :以离渐变中心点最近的元素顶角计算渐变的范围。
farthest-corner :以离渐变中心点最远的顶角计算圆的半径。
例如:background-image: radial-gradient(#d63c21, #e0d865);
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
平铺的径向渐变
background-image: repeating-radial-gradient(circle at 20% 40%,#eea2a2 20px, #57c6e1 20px, #b49fda 40px, #7ac5d8 40px, #b49fda 60px, #4F9C9C 60px, #57c6e1 80px, #99CCCC 80px, #eea2a2 100px);