html中怎样写渐变色代码,css如何实现渐变效果?-程序员宅基地

技术标签: html中怎样写渐变色代码  

一、css背景色渐变样式

1.css线性背景渐变样式

语法:

background-image:linear-gradient(||,,,)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(colorstops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比。

代码(考虑浏览器兼容性):

css背景渐变--线性渐变

.demo{

width:500;

height:300;

margin:50pxauto;

}

.demo*{

width:200px;

height:200px;

margin:20px;

text-align:center;

line-height:200px;

color:#fff;

font-size:16px;

float:left;

}

.demo1{

/*底色*/

background-color:#fd0d0d;

/*chrome2+,safari4+;multiplecolorstops*/

background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.32,#fd0d0d),color-stop(0.66,#d89e3c),color-stop(0.83,#97bb51));

/*chrome10+,safari5.1+*/

background-image:-webkit-linear-gradient(#fd0d0d,#d89e3c,#97bb51);

/*firefox;multiplecolorstops*/

background-image:-moz-linear-gradient(top,#fd0d0d,#d89e3c,#97bb51);

/*ie6+*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c');

/*ie8+*/

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c')";

/*ie10*/

background-image:-ms-linear-gradient(#fd0d0d,#d89e3c,#97bb51);

/*opera11.1*/

background-image:-o-linear-gradient(#fd0d0d,#d89e3c,#97bb51);

/*标准写法*/

background-image:linear-gradient(#fd0d0d,#d89e3c,#97bb51);

}

.demo2{

/*底色*/

background-color:#d41a1a;

/*chrome2+,safari4+;multiplecolorstops*/

background-image:-webkit-gradient(linear,leftbottom,righttop,color-stop(0.32,#d41a1a),color-stop(0.66,#d9e60c),color-stop(0.83,#5c7c99));

/*chrome10+,safari5.1+*/

background-image:-webkit-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);

/*firefox;multiplecolorstops*/

background-image:-moz-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);

/*ie10*/

background-image:-ms-linear-gradient(45deg,#d41a1a0%,#d9e60c100%);

/*opera11.1*/

background-image:-o-linear-gradient(45deg,#d41a1a,#d9e60c);

/*标准写法*/

background-image:linear-gradient(45deg,#d41a1a,#d9e60c);

}

基本线性渐变--自上而下

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39865440/article/details/117724825

智能推荐

2022哈工大计算机系统大作业_郭仁恺-程序员宅基地

文章浏览阅读265次。摘 要本文分析了hello程序的整个运行生命周期。首先编写hello.c源程序,之后运行C预处理器对其进行预处理,得到hello.i文件,运行C编译器将翻译生成汇编语言文件hello.s,然后运行汇编器将其翻译成一个可重定位目标文件hello.o,最后运行链接器程序将hello.o和系统目标文件组合起来,就可以创建一个可执行目标文件hello。在shell接收到输入的./hello的指令后开始调用fork函数创建进程,execve加载hello进入内存,由CPU控制程序逻辑流的运行,中断,上下文切换和._郭仁恺

【C/C++】JAVA与C/C++ AES加密算法同步_botan c++ aes java 互通-程序员宅基地

文章浏览阅读4.6k次。此处我们使用的是AES的基础加密模式,即:电码本模式 ECBJAVA代码如下: //创建AES加密实例 SecretKeySpec skeySpec = new SecretKeySpec(keyBytes, "AES"); Cipher cip = Cipher.getInstance("AES/ECB/NoPadding");//算法/模式/补码方式 cip.init(C_botan c++ aes java 互通

民工哥折腾了2年多的《Linux系统运维指南》终于和大家见面了_linux系统运维指南:从入门到企业实战 pdf-程序员宅基地

文章浏览阅读2.5k次,点赞5次,收藏17次。2018年3月,我与张老师就这么在微信上聊了起来,起初我并没有写书的打算,我们之间只是通过讨论、交流的形式聊聊关于出书的方方面面。最终,敌不过张老师超强的专业能力、细致的解说与盛情相邀,我答应张老师写一本Linux系统运维的图书并由人邮出版。由此,我踏上了漫漫2年多的写书之路。为什么写这本书写书一方面是我对自己所学知识的查漏补缺过程,另一方面也可以向即将进入或已经入行的Linux系统运维同..._linux系统运维指南:从入门到企业实战 pdf

tf.reduce_sum()方法深度解析-程序员宅基地

文章浏览阅读2k次,点赞6次,收藏5次。tf.reduce_sum()函数深度解析从矩阵,数组,数据存储的角度 解析axis参数的意义_tf.reduce_sum

adb获取app包名的方法_adb获取包名-程序员宅基地

文章浏览阅读9.8k次,点赞4次,收藏29次。adb获取app包名的方法_adb获取包名

虾皮、lazada店铺运营攻略,如何搭建高效、稳定的自养号测评系统-程序员宅基地

文章浏览阅读913次,点赞16次,收藏10次。总之,要做好虾皮店铺,不仅需要明确的定位和优质的产品,还需要精心的运营和持续的改进。通过不断优化店铺形象、制定有效的营销策略、提供优质的客户服务以及加强供应链管理等手段,您将能够在激烈的竞争中脱颖而出,实现店铺的长足发展。1.稳定的网络环境是基石,它需要经过技术手段的洗礼,将电脑或手机的底层硬件参数伪装成国外数据,以躲避平台通过IP进行的深度检测。这种真实性高的评价能够帮助商家获得更多的信任和认可,从而提升产品的排名和流量的分配。您可以关注行业动态,学习先进的经营理念和技术,以提高店铺的运营水平。

随便推点

(js) 字符串和数组的常用方法-程序员宅基地

文章浏览阅读132次。JS中字符串和数组的常用方法JS中字符串和数组的常用方法 js中字符串常用方法 查找字符串 根据索引值查找字符串的值 根据字符值查找索引值 截取字符串的方法 字符串替换 字符串的遍历查找 字符串转化为数组 ..._js根据索引查找字符串

hadoop大数据-HDFS分布式文件系统及高可用_hdfs实现高可用文件存储-程序员宅基地

文章浏览阅读2k次,点赞2次,收藏9次。系列文章目录hadoop大数据-HDFS分布式文件系统hadoop大数据-HDFS分布式文件系统系列文章目录一、hadoop简介二、Hadoop的搭建2.1本地独立模式2.1伪分布式模式的搭建完成分布式的搭建完全分布式的环境搭建完全分布式的配置hadoop结点扩容四、HDFS工作原理一、hadoop简介大数据主要两个点:分布式存储以及分布式计算,基本上计算的调度跟着存储走,因为迁移存储的成本高于计算大数据是个生态,本次学习Hadoop的HDFS分布式文件系统MapReduce离线计算GF_hdfs实现高可用文件存储

【合集】常见中间件漏洞_hrs中间件-程序员宅基地

文章浏览阅读2.9k次,点赞3次,收藏37次。1. IIS1. PUT漏洞用户配置不当,exp:https://github.com/hackping/HTTPMLScan.git2. 短文件名猜解IIS的短文件名机制,可以暴力猜解短文件名,访问构造的某个存在的短文件名,会返回404,访问构造的某个不存在的短文件名,返回400。exp:https://github.com/WebBreacher/tilde_enum3.远程代码执行(CVE-2017-7269))**exp**:https://github.com/zcgonv_hrs中间件

db2基本概念-程序员宅基地

文章浏览阅读368次。DB2支持以下两种类型的表空间: 1、 系统管理存储器表空间(SMS-SYSTEM MANAGED STORAGE) 2、 数据库管理存储器表空间(DMS-DATABASE MANAGED STORAGE) SMS、DMS用户表空间的特性对照 特性 ..._db2

模拟window桌面实现-程序员宅基地

文章浏览阅读84次。正在开发中的游戏有个全屏功能--可以在window桌面背景上运行,就像一些视频播放器在桌面背景上播放一样的,花了个上午整了个Demo放出来留个纪念。实现功能:显示图标,双击图标执行相应的程序,右击图标弹出该图标对应得菜单,点击非图标区则弹出桌面菜单。需要完整工程可以点此下载:DesktopWindow.rar。程序效果图如下:在这个程序里,定义了一个XShellItem..._模拟实现windows桌面效果

https://www.byhy.net/tut/webdev/django/01/-程序员宅基地

文章浏览阅读944次。https://www.byhy.net/tut/webdev/django/01/_byhy.net

推荐文章

热门文章

相关标签