linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); linear-gradient(red 10%, 30%, blue 90%); linear-gradient(red 40%, yellow 30%, blue 65%); linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%,...
p { width: 400px; height: 150px; line-height: 150px; text-align:center; color: #000; font-size:24px; background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);; } 效果如下: 实例3: background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)...
由此,想到了彩虹,我们可以依次列出赤橙黄绿青蓝紫七种颜色: conic-gradient: (red, orange, yellow, green, teal, blue, purple) 上面表示,在圆锥渐变的过程中,颜色从设定的第一个red开始,渐变到orange,再到yellow,一直到最后设定的purple。并且每一个区间是等分的。 我们再给加上border-radius: 50%,假设我们...
blue ,red); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient( #0CF, blue ,red); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient( #0CF, blue ,red); /* Firefox 3.6 - 15 */background:
background:linear-gradient(red50%,orange50% ); 根据上面全部所说的,自己简简单单就能通过一个属性做出一个多重颜色线条的背景 background:linear-gradient(red0%,red14.3%,orange0,orange28.6%,yellow0,yellow42.9%,green0,green57.2%,blue0,blue71.5%,indigo0,indigo85.8%,violet0,violet100% ); ...
conic-gradient: (red, orange, yellow, green, teal, blue, purple) 上面表示,在圆锥渐变的过程中,颜色从设定的第一个 red 开始,渐变到 orange ,再到 yellow ,一直到最后设定的 purple 。并且每一个区间是等分的。我们再给加上 border-radius: 50% ,假设我们的 CSS 如下,...
linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); By default, colors transition smoothly from the color at one color-stop to the color at the subsequent color-stop, with the midpoint between the colors being ...
conic-gradient: (red, orange, yellow, green, teal, blue, purple) 上面表示,在圆锥渐变的过程中,颜色从设定的第一个 red 开始,渐变到 orange ,再到 yellow ,一直到最后设定的 purple 。并且每一个区间是等分的。 我们再给加上 border-radius: 50% ,假设我们的 CSS 如下, ...
linear-gradient(white, skyblue 50%); 1. 未指定分界线位置,则颜色等分 linear-gradient(red, orange, yellow, green); /* 等同于 */ linear-gradient(red 0%, orange 33.33%, yellow 66.66%, green 100%); 1. 2. 3. 分界线位置可以是负数,也可以大于100%。
background:-moz-linear-gradient(left,red,orange,yellow,green,blue); 透明度(Transparency):还支持透明渐变。这是相当有用的,例如,当堆叠多个背景时。这里是两个背景的结合:一张图片,一个白色到透明的线性渐变。 核心代码如下: .multibackground_transparent{background:-moz-linear-gradient(right,rgba(255,255,...