css背景从左到右颜色渐变,CSS：linear-gradient()背景颜色渐变

background: linear-gradient(direction,color-stop1,color-stop2,...);

direction：用角度值指定渐变的方向(或角度)；

color-stop1,color-stop2,...：用于指定渐变的起止颜色

ps：至少需要两种颜色

1 background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */

2 background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */

3 background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */

4 background: linear-gradient(red,yellow,blue); /* 标准语法 */

兼容性

练习

1、background: linear-gradient(to left,#d3959b,#bfe6ba);

to left 设置渐变从右到左，相当于270deg

2、background: linear-gradient(to right,#d3959b,#bfe6ba);

to right设置渐变从左到右，相当于90deg

3、background: linear-gradient(to top,#d3959b,#bfe6ba);

to top 设置渐变从下到上，相当于0deg

4、background: linear-gradient(to bottom,#d3959b,#bfe6ba);

5、background: linear-gradient(to top right,#d3959b,#bfe6ba);

to right top = to top right ：从左下角到右上角，对角线角度

6、background: linear-gradient(45deg,#d3959b,#bfe6ba);

和to top right 有细微差别(背景为正方形的时候无差别)

7、background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

用百分比指定起始颜色的位置，默认值为0%；

8、background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);

9、background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

10、background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

rgba使用了0.5的透明度

css背景从左到右颜色渐变,CSS：linear-gradient()背景颜色渐变相关推荐

css 从右到左滚动,CSS 文字从左到右滚动（右进左出）
结构 CSS 文字从左到右滚动(所需要滚动的文字) css样式 .divWrap{ width: 300px;//(宽度) overflow: hidden;//(超出隐藏) } .div{ disp ...
16.SVG线性渐变（Linear Gradient）
SVG 渐变和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变.渐变方式有两种:线性和径向. SVG 线性渐变 - linearGradie ...
css实现从左到右渐变色
background-image: linear-gradient(to right , #9B63FF, #462188)
在html中怎么写背景色渐变,CSS 实现背景色渐变和文字颜色渐变(示例代码)
1. 背景色渐变 A . linear-gradient:用线性渐变创建图像. 语法: = linear-gradient([ [ | to ] ,]? [, ]+) 下述值用来表示渐变的方向,可 ...
html阴影渐变,CSS 阴影轮廓渐变详解
阴影 box-shadow: h-shadow v-shadow blur spread color inset; text-shadow: h-shadow v-shadow blur color; ...
css3 Gradient背景
css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...
CSS 文字，边框实现从左至右颜色渐变
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 1.文本从左至右颜色渐变效果图: 2.边框从左至右颜色渐变效果图: 实现代码: 1.文本从左至右颜色渐变实 ...
html背景色线性渐变,css中背景颜色线性渐变和径向渐变效果的示例分析
css中背景颜色线性渐变和径向渐变效果的示例分析发布时间:2021-06-04 14:00:26 来源:亿速云阅读:80 作者:小新这篇文章将为大家详细讲解有关css中背景颜色线性渐变和径向渐变 ...
php背景渐变颜色代码,CSS实现网页背景渐变的四种代码设置
这篇文章主要介绍了关于CSS实现网页背景渐变的四种代码设置,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下一.从上往下渐变body{ FILTER: progid:DXImageTra ...

css背景从左到右颜色渐变,CSS：linear-gradient()背景颜色渐变

css背景从左到右颜色渐变,CSS：linear-gradient()背景颜色渐变相关推荐

最新文章

热门文章