`
wpf_0508
  • 浏览: 13535 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

css 横向渐变 图片阴影效果 字体模糊效果

 
阅读更多

(必须加在Table的TD里,如果TD有背景就会遮盖阴影,可以把背景放到外套的表格里去)

背景颜色渐变
横向渐变
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"
纵向渐变
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff0000', endColorStr='#ffffff', gradientType='0')"

图片阴影效果
style="filter:progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=2,offY=2,positive=true);"

文字边框特效
style="filter:progid:DXImageTransform.Microsoft.Glow(color=#ffffff,strength=1);"

背景图随表格拉伸而不重复的拉伸填充
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')"

字体模糊效果
style="FILTER: blur(add=1, direction=100,strength=1); "

文字阴影效果
style="filter:dropshadow(color=#ffffcc,offx=1,offy=1)"

PNG图片背景透明
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Icon01.png'); width:50px; height:33px; "

TD强制不换行,同时多余部分隐去
style="white-space:nowrap;overflow: hidden;"

TD强制换行
style="word-break:break-all;"

图片透明效果
filter:alpha(opacity=30);

filter:alpha(opacity=30,finishOpacity=0,style=0,startx=10,starty=5,finishx=70,finishy=20);
"opacity"代表透明度水准。默认的范围是从0 到 100,他们其实是百分比的形式。
也就是说,0代表完全透明,100代表完全不透明。”finishopacity"是一个可选参数,
如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
"style" 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、
3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”FINISHX“和”
FINISHY“代表渐变透明效果结束X和Y 的坐标。

分享到:
评论

相关推荐

    23种css3图片阴影效果

    纯CSS3实现的各种阴影效果,无需图片和js代码即可实现图片、按钮等元素的阴影效果,完全通过样式控制阴影大小、方向和深度,经测试效果相当不错非常酷。

    DIV+CSS实现横向无缝图片滚动效果

    标题中的“DIV+CSS实现横向无缝图片滚动效果”是指在网页设计中,通过HTML的`<div>`元素和CSS样式来创建一个可以水平无限循环滚动的图片展示区域。这种效果通常用于网站的横幅广告、产品展示或者新闻更新等部分,以...

    css3文字颜色渐变和文字阴影特效

    **CSS3文字颜色渐变和文字阴影特效** 在现代网页设计中,CSS3已经成为不可或缺的一部分,它提供了许多新的特性和功能,使得网页的视觉表现力更加强大。本主题聚焦于CSS3中的两个重要特性:颜色渐变和文字阴影,它们...

    css3渐变进度条加载动画特效

    **CSS3渐变进度条加载动画特效详解** 在网页设计中,进度条是常见的交互元素,用于指示某个任务的完成进度。随着技术的发展,CSS3引入了许多新的特性,使得我们可以创建出更加美观且动态的进度条动画效果。本篇文章...

    CSS实现当鼠标滑过图片出现阴影效果

    本篇文章将详细讲解如何利用CSS实现一个动态效果:当鼠标滑过图片时,图片周围出现阴影效果。这个效果能够增加交互性,提升用户的浏览体验。 首先,我们需要创建一个HTML结构,包含一张图片。例如: ```html <!...

    使得IE支持CSS3 圆角阴影 渐变

    使得IE支持CSS3 圆角阴影 渐变

    12种炫酷CSS3图片切换过渡效果

    11. **阴影过渡**:`box-shadow`属性可以控制元素的阴影,通过改变阴影的大小、颜色,可以实现图片边缘阴影的过渡效果。 12. **动画序列过渡**:通过`@keyframes`规则定义动画的关键帧,可以创建复杂的动画过渡,...

    CSS3实现带阴影边框效果弹出窗口

    这种效果使得用户在点击某个元素时,一个带有阴影边框的弹出窗口会在网页中央出现,通常用于展示图片、内容详情或者表单填写等场景。CSS3的引入极大地丰富了网页的视觉效果,提供了更多自定义的可能性。 【描述】:...

    CSS3在线实现图片阴影效果.zip

    【CSS3在线实现图片阴影效果.zip】这个压缩包文件包含了一种使用CSS3技术来创建图片阴影效果的方法。CSS3是CSS(层叠样式表)的最新版本,它引入了许多新特性和功能,使得网页设计更为丰富和动态。在这个项目中,...

    最新CSS横向图片伸缩

    "最新CSS横向图片自动伸缩"是一种流行的设计技术,用于使网页上的图片在不同屏幕尺寸下保持良好的显示效果。这种技术特别适用于响应式设计,确保图片在手机、平板电脑和桌面显示器上都能自适应地展示。 在创建这种...

    CSS3实现圆角阴影渐变效果兼容IE等浏览器

    在现代网页设计中,CSS3已经成为了不可或缺的一部分,它提供了许多增强视觉效果的功能,比如圆角、阴影和渐变。本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果,并确保这些效果在包括IE在内的主流浏览器中都能...

    CSS3悬停放大图片两边模糊显示.zip

    【标题】"CSS3悬停放大图片两边模糊显示" 是一个使用CSS3技术实现的交互效果,当鼠标悬停在图片上时,该图片会放大并突出显示,同时其两侧的图片会呈现模糊效果,增加了视觉吸引力和用户体验。这个效果在网页设计中...

    CSS渐变滤镜大全(可以实现很多渐变……效果)

    CSS滤镜则为元素提供了一套丰富的图像处理功能,如模糊(`blur()`), 颜色调整(`brightness()`, `contrast()`, `hue-rotate()`), 阴影(`drop-shadow()`)等,可以用来增强网页的视觉效果。例如: ```css .filter-...

    CSS3在线实现图片阴影效果

    本文将深入探讨如何使用CSS3在线实现图片阴影效果,以及它对设计师工作流程的影响。 首先,CSS3的阴影效果主要包括`box-shadow`和`text-shadow`两个属性。`box-shadow`用于为元素添加盒阴影,而`text-shadow`则是为...

    CSS3图片相册立体阴影效果

    CSS3实现的图片列表,当鼠标悬停在图片上的时候,图片立体显示,且带有一定阴影效果,点击图片则会弹出提示对话框。 建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~它是一款HTML5跨...

    css横向导航菜单样式

    css 横向导航菜单样式 css 横向导航菜单是指在网页中使用 CSS 语言来实现的横向导航菜单样式,该样式...css 横向导航菜单样式通过使用多种 CSS 样式和选择器来实现菜单的样式效果,使得网页导航菜单更加美观、易用。

    一个超级简单的JS库实现一个背景渐变与字体颜色阴影效果

    【标题】:创建一个简单的JS库来实现背景渐变与文字阴影效果 在网页设计中,视觉效果常常是吸引用户注意力的关键因素。本项目提供了一个轻量级的JavaScript库,旨在帮助开发者轻松实现背景渐变和文字阴影效果,从而...

    css阴影效果,css阴影效果

    在CSS(层叠样式表)中,阴影效果是一种强大的视觉设计工具,用于为元素添加立体感和深度。本文将深入探讨CSS阴影效果的使用方法、属性以及如何通过实践提升网页设计的美观度。 首先,CSS提供了两种类型的阴影效果...

    兼容各浏览器的css渐变

    css渐变代码,代码兼容各个浏览器,适用于ie7以上及各主流浏览器

    懒人原生css3实现图片由模糊到清晰逐渐加载过程

    在手机移动客户端,我们经常看到图片由模糊到清晰的加载过程 如果抛给你这样一个问题,你会怎么去实现呢 而且是在不用js的基础上实现 今天懒人站长写了这样一个效果,供给大家参考使用 其原理就是...

Global site tag (gtag.js) - Google Analytics