23种CSS图片修饰效果代码:
<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/2008919516673537.gif"></CENTER>
<br><br>
1。单线框<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:3 solid #ff0000"><br><br>
2。双线框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:8 double green"><br><br>
3。凸出框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="border:25 outset #ff88ff"><br><br>
4。凹进框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 inset #ff88ff"><br><br>
5。邮票框
<br><br>
<table style="border:3 dashed #f6ae56" cellspacing="1" cellpadding="0" bgcolor="#f6ae56">
<tr><td bgcolor="#aeffae" width=360 height=180 align=center ><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg">
</TD></TR></TABLE>
<br><br>
6。虚线框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:4 dashed #ff0000"><br><br>
7。凹槽框
<br><br><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 groove green" border="0"><br><br>
8。脊状框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="border:25 ridge green" border="0"><br><br>
9。立体阴影框
<br><br>
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"> <tr><td bgcolor="#ffffff" align=center valign=middle><img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"><br><br>
</TD></TR></TBODY></TABLE>
10。阴影框
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:shadow(color=#32cd32)"><br><br>
11。横向渐变透明
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=1,finishopacity=0)"><br><br>
12。圆形渐变透明
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=2,finishopacity=0)"><br><br>
13。X形渐变透明
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter=alpha(opacity=100,style=3,finishopacity=0)"><br><br>
14。改变某种颜色
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg"style="FILTER: Chroma(Color=#13629f)"><br><br>
15。黑白效果
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:'gray'"><br><br>
16。X光效果(底片)
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:'xray'"><br><br>
17。浮雕效果
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()"><br><br>
18。上下颠倒
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:flipv"> <br><br>
19。左右颠倒
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/50.jpg" style="filter:fliph"><br><br>
20。色彩颠倒
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:invert"><br><br>
21。粒状阴影
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)">
<br><br>
22。模糊效果
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"><br><br>
23。水波效果(风吹)
<br><br>
<img src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>
<br><br>
</b></font>
<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/20089195151190032.gif"></CENTER>
文字修饰特效:
1、Glow:在文字的边外加光辉效果代码:
<CENTER>
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt">
<FONT style="FONT-SIZE: 90pt;FONT-FAMILY:隶书; COLOR: #ffff00">
如画江山</FONT></div>
</CENTER>
(二)Drop Shadow滤镜修饰的文字重叠效果代码:
<CENTER>
<div style="FONT-SIZE:70pt;filter:dropshadow(color=#000000,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%">
<FONT style="FONT-SIZE:70pt;FONT-FAMILY:隶书">社会主义好!</FONT>
</div></CENTER>
(三)Shadow滤镜修饰的文字阴影果代码:
<CENTER>
<div style="FONT-SIZE:70pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:#60A000;LINE-HEIGHT:150%">
<FONT style="FONT-SIZE:70pt;FONT-FAMILY:隶书">社会主义好!</FONT>
</div></CENTER>
(四)Shadow滤镜修饰的文字阴影果代码2:
<CENTER>
<DIV style="FONT-SIZE: 100pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 150%">
<FONT style="FONT-FAMILY: 华文行楷">
网络世界
</DIV></CENTER>
(五)Shadow滤镜修饰的文字阴影效果代码3:
<CENTER>
<DIV style="FONT-SIZE:70pt;filter:dropshadow(color=000066,offX=-5,offY=-3,Positive=1);WIDTH:100%; COLOR:#FF0000;LINE-HEIGHT:120%">
<FONT style="FONT-FAMILY: 隶书">
社会主义好!</B></FONT>
</DIV></CENTER>
(六)Shadow滤镜修饰的文字阴影效果代码4:
<CENTER>
<FONT style="FONT-SIZE:80pt; FILTER: shadow(color=black, strength=15); WIDTH: 100%";FONT face=华文彩云 color=00ff00><B>
春风秋雨</B></FONT></CENTER>
(七)Wave滤镜修饰文字变幻效果代码:
<center>
<div style="FONT-SIZE:50pt;filter:wave(add=0,lightstrength=50,strength=6,freq=2,phrase=50);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%">
<FONT style="FONT-FAMILY:华文行楷">
长空雁叫霜晨月</FONT></div>
</center>
分享到:
相关推荐
### CSS常用代码大全 #### 字体属性 (Font) 在网页设计中,良好的字体表现能够显著提升用户体验。以下是一些常见的CSS字体属性: 1. **大小** (`font-size`): 设置文本的大小。 - `x-large`: 特大的字体大小。 ...
CSS3实现波纹特效和H5实现动态波浪效果是前端网页设计中常见的视觉表现形式,主要通过CSS3的相关属性和方法来创建动态和富有美感的视觉效果,以下详细说明这些知识点。 首先,CSS3是HTML5的主要样式表语言,其通过...
"网页设计与制作教程(HTML、CSS、JavaScript)第2版第8章使用CSS修饰链接与列表" 本章节主要介绍了使用CSS来修饰链接和列表的方法。首先,介绍了制作超链接特效的方法,包括动态超链接和浮雕背景超链接。然后,讨论...
实验4的目的是学习如何使用CSS来修饰网页中的文字和段落,从而实现内容与样式的分离,提升网页的可维护性和美观度。CSS(层叠样式表)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。在...
在实际工作中,我们还需要关注浏览器兼容性问题,使用预处理器(如Sass、Less)提高代码的可维护性,以及利用CSS框架(如Bootstrap、Foundation)快速构建页面布局。 总之,`div+css`是网页设计的基础,熟练掌握其...
这部分代码是实现圆角效果的核心。通过嵌套不同层级的`<b>`标签,并结合不同的边距和高度设置,模拟出了圆角的效果。例如,`.rtop`和`.rbottom`类定义了顶部和底部圆角的外观,而`.r1`到`.r4`类则分别设置了不同...
css样式修饰用到最多的是绝对定位和相对定位,边框修饰,文字修饰,颜色美化等。js用了100多行代码做了一个轮播图效果。 简单总结: 1.没有看过做成效果图的先看我的博客。 2.web大多常用的知识点都以用上 3.该资源...
开发者可以通过查看源代码学习如何设置样式表,以及如何将其应用到不同的Qt控件上,例如按钮、标签、窗口等。这个例子可能是逐步指导,从基础样式开始,然后逐步引入更复杂的效果,如渐变、圆角、动画等。 六、实践...
今天给大家推荐的这款js网页特效代码,就是如此效果。 扁平化设计具有着一种让人心醉的美丽.没有大量的修饰,它能以一个简单直白的方式来传递一个信息或者帮助一个产品以及思想变得更加深入人心。所以说,趁在下...
### CSS最常用的样式代码知识点详解 #### 一、字体样式属性 **1. 字体大小 (`font-size`):** - `font-size: x-large;`: 特大字体大小。 - `font-size: xx-small;`: 极小字体大小。 - 通常中文环境下较少使用...
5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....
在实际应用中,开发者通常会结合使用这些资源和工具,例如,选择一款合适的代码编辑器编写源码,利用图形设计工具创建图形元素,然后将它们整合到HTML和CSS中。同时,通过引入JavaScript库,如jQuery或React,可以...
注:本页面仿照京东首页进行开发,我的博客有效果图哦~ 效果图链接:https://blog.csdn.net/weixin_52258054/article/details/137602915?spm=1001.2014.3001.5501 ...5.代码量html文件800+行,css修饰1200+行
本资源提供的代码着重于使用CSS来定制`h1`, `h2`, `h3`, `h4`, `h5`这些HTML标题标签的样式。这些标题标签在网页内容结构中扮演着关键角色,它们分别代表不同级别的主题和子主题。 `h1`是最高级别的标题,通常用于...
属性模块涉及到CSS的属性选择、继承、层叠等机制,是实现页面样式效果和风格统一的关键因素。在深入理解CSS属性模块时,需要关注的几个关键知识点包括: 一、CSS类的命名与维护 在CSS中,类(class)是常用的选择器...
又一个CSS DIV圆角边框代码,同样是把图片来修饰成的圆角特效,兼容IE8/火狐、Chrome等浏览器,由测试截图可看出,本实例实现上边左右两个角的圆角效果,下边则是直角,需要的朋友,自己动动手,修改一下CSS,可实现...
今天带给大家的是一款在HTML5技术支持下,采用CSS3实现的15款图像滤镜效果,把图片修饰成香复古、明亮、鲜艳、墨水瓶、怀旧、光影等众多效果,可将本特效使用在基于CSS3技术实现的各种图片展示效果中。 提示:将...
59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏...
通过明确组件、元素和修饰符,可以避免样式冲突和提高代码复用率。 8. **CSS-in-JS**:这是一种将CSS样式写入JavaScript中的新兴趋势,如styled-components和emotion。这种方法的优点在于样式和组件可以更紧密地...