在Web上用style实现完美颜色渐变

最新推荐文章于 2024-06-20 11:21:40 发布
最新推荐文章于 2024-06-20 11:21:40 发布
阅读量174 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014739768/article/details/24721107
版权

上微软中国网站时发现页面上方的颜色渐变非常好，查看其源代码，发现在<td>内部用了类似如下的样式： 
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"

然后我写了个测试网页试了试，果然可以。代码如下： 
<!----------------------------------------> 
<html> 
<head> 
<title>无标题文档</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head>

<body bgcolor="#FFFFFF" text="#000000"> 
<table width="600" border="0" cellspacing="0" cellpadding="0" height="30" align="center"> 
<tr> 
<td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')">&nbsp;</td> 
</tr> 
</table> 
</body> 
</html> 
<!----------------------------------------> 

ssyzbyyc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
04-CSS3-渐变色、2D转换、3D转换
记录java学习日常~
05-21 1022
CSS渐变色（Gradient）是指在元素背景中使用两种或多种不同的颜色进行过渡，超过两个颜色可以形成更为细腻的渐变效果。常见的CSS渐变色有线性渐变和径向渐变。 线性渐变从一个颜色到另一个颜色沿着一条直线渐变，实现代码如下： 其中，direction参数指定了线性渐变的方向，可以是to top、to bottom、to right、to left、to top left等等值；color-stop表示颜色变化节点，可以设置百分比值或距离值。以下CSS代码定义了从左上到右下的渐变色背景： 径向
CSS Houdini：用浏览器引擎实现高级CSS效果
JavaMonsterr的博客
07-13 202
Houdini被称之为Magic of styling and layout on the web，看起来十分神秘，但实际上，Houdini并非什么神秘组织或者神奇魔法，它是一系列与CSS引擎相关的浏览器API的总称。在了解之前，先来看一些Houdini能实现的效果吧：反向的圆角效果（Border-radius)：动态的球形背景（Backgrond）：彩色边框（Border）：神奇吧，要实现这些效果使用常规的CSS可没那么容易，但对CSS Houdini来说，却很easy，这些效果只是冰山一角，CSS Ho
在Web上用style实现完美颜色渐变 (非原创)
hawk917
09-02 848
上微软中国网站时发现页面上方的颜色渐变非常好，查看其源代码，发现在内部用了类似如下的样式：style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#98B2E6, gradientType=1)"然后我写了个测试网页试了试，果然可以。代码如下：无标题文档
CSS渐变背景色，这一篇就够了（附代码案列讲解）
最新发布
(黎子)人生编码
06-20 6299
CSS渐变背景色是一种流行的网页设计技巧，它可以使网页元素的外观更加丰富和吸引人。渐变可以是线性的、径向的，甚至可以是复杂的多色渐变。本文将介绍如何使用CSS创建各种渐变背景色，并提供示例代码和效果展示。
移动Web（字体图标、平面转换、颜色渐变）
qq_43826202的博客
04-14 390
字体图标、平面转换、颜色渐变
Css样式表之渐变色的实现
avgk01030117的博客
03-14 298
在网页中做渐变色一直是个比较痛苦的事情，又是图片又是背景，现在好了，找了下搜索引擎终于发现其实样式表是可以实现渐变的效果的，以前一直都不知道，诶。1、从左到右的渐变：style="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#0000ff,endColo...
CSS3圆形修边渐变按钮特效.zip
10-09
首先，CSS3是 Cascading Style Sheets 的第三版，是Web设计领域中不可或缺的一部分，尤其在现代网页设计中扮演着关键角色。CSS3引入了许多新特性，如选择器增强、多列布局、过渡（transition）、动画（animation）...
个性漂亮的记事本CSS模板_灰色 web20 企业 个性 幻灯.zip
02-21
在IT行业中，前端开发是构建网站和应用程序的重要环节，而CSS（Cascading Style Sheets）则是前端设计的核心技术之一。这个名为"个性漂亮的记事本CSS模板_灰色 web20 企业 个性 幻灯.zip"的压缩包文件提供了一个独特...
WEB 前端面试题 (高能)
m0_64191440的博客
11-11 1108
我们让原型对象等于另一个原型对象的实例,此时原型对象 ,将包含一个指向原型对象的指针，再让原型对象 的实例等于原型对象，如此层层递进就构成了实例和原型的链条，这就是原型链的概念。取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次 数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的。描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
纯css3+svg实现的纸飞机飞行动画特效源码.zip
11-01
在IT行业中，CSS3（Cascading Style Sheets Level 3）是用于描述HTML或XML（包括SVG、XHTML等）文档样式的Web标准语言。它极大地扩展了其前身CSS2.1的功能，引入了许多新的特性，如动画、阴影、渐变、多列布局以及...
CSS渐变色
m0_63639281的博客
07-22 6930
css渐变颜色
css基础知识 -- 颜色渐变
qq_52993453的博客
11-20 1万+
渐变：使您可以显示两种或多种指定颜色之间的平滑过渡 CSS 定义了两种渐变类型： 线性渐变（向下/向上/向左/向右/对角线） 如需创建线性渐变，必须定义至少两个色标。色标是要呈现平滑过渡的颜色。还可以设置起点和方向（或角度）以及渐变效果。 //语法 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 1.从上到下（默认） #grad { background-image:...
css 设置背景色渐变、字体颜色渐变
神膘护体小月半的博客
08-18 9060
css 设置背景色渐变、字体颜色渐变
css做渐变背景色集结
tianyiforever的专栏
05-08 3205
css-body背景渐变色的CSS一、从上往下渐变 body{ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000); } 二、从左上至右下渐变 body{ FILTER: Alpha( style=1,
CSS3渐变、web字体、字体图标
m0_60376759的博客
04-11 793
CSS3渐变：可以使用 CSS 代码创建一个渐变，渐变会被 CSS 当做图片。 要使用渐变必须通过使用图片的 CSS 属性，如 background-image。 1.线性渐变 /* 多个颜色之间的渐变， 默认从上到下渐变 */ linear-gradient(red, green); linear-gradient(red, yellow, green); /*设置线性渐变的方向*/ /* 使用关键字 to left、to top、 to right、to bottom、to left top、
css文字颜色渐变的3种实现
web前端开发教程htmlcssjs
11-04 830
在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！ 基础样式： .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; ...
CSS 之 渐变色边框
热门推荐
weixin_45092437的博客
12-06 2万+
我下面列举三种方案来帮你排忧解难： 1、 border-image 2、 伪元素+透明边框 3、 background-image+background-clip+background-origin
web实现背景颜色渐变色
06-10
Web实现背景颜色渐变色有多种方式，其中比较常用的是使用CSS的线性渐变（linear-gradient）属性。具体实现方法如下： 1. 在CSS中设置背景颜色为线性渐变： ``` body { background: linear-gradient(to bottom, #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值