一、基础代码
<IMG src="/picture/css20080501.jpg" width=224>
二、加边框
1、普通黑色边框(浏览器默认黑色)
<img src="/picture/css20080501.jpg" width=224 border=12>
2、简单的CSS装饰框
①<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 solid">
②<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dashed">
③<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dotted">
④<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 double">
⑤<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 groove">
⑥<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 ridge">
⑦<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 inset">
⑧<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 outset">
① ② ③ ④ ⑤ ⑥ ⑦ ⑧
三、加CSS滤镜
1、无参数滤镜
①黑白
<IMG style="FILTER: gray()" src="/picture/css20080501.jpg" width=224>
②底片
<IMG style="FILTER: xray()" src="/picture/css20080501.jpg" width=224>
③X光片
<IMG style="FILTER: invert()" src="/picture/css20080501.jpg" width=224>
④水平翻转
<IMG style="FILTER: fliph()" src="/picture/css20080501.jpg" width=224>
⑤垂直翻转
<IMG style="FILTER: flipv()" src="/picture/css20080501.jpg" width=224>
① ② ③ ④ ⑤
2、透明效果(opacity=100 透明度0—100)
①<IMG style="FILTER: Alpha(opacity=100,style=1)" src="/picture/css20080501.jpg" width=224>
②<IMG style="FILTER: Alpha(opacity=100,style=2)" src="/picture/css20080501.jpg" width=224>
③<IMG style="FILTER: Alpha(opacity=100,style=3)" src="/picture/css20080501.jpg" width=224>
④<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="/picture/css20080501.jpg" width=224>
① ② ③ ④
3、其他特效
①浮雕
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Emboss()" src="/picture/css20080501.jpg" width=224>
②波纹
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Wave()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:Wave(Add=0,Freq=5,LightStrength=10,Phase=2,Strength=20)" src="/picture/css20080501.jpg" width=224>
(Add=是否打乱1或0;Freq=频率;LightStrength=光效强度;Phase=偏移量;Strength=振幅)
③模糊
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Blur()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:Blur(Add=1,Direction=45,Strength=150)" src="/picture/css20080501.jpg" width=224>
(Add=是否模糊1或0;Direction=方向;Strength=强度)
④发光
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow(Color=#987cb9,Strength=10)" src="/picture/css20080501.jpg" width=224>
(Color=颜色;Strength=强度)
⑤阴影
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#987cb9,Direction=135,Strength=10)" src="/picture/css20080501.jpg" width=224>
(Color=颜色;Direction=方向;Strength=强度)
⑥投影
<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow()" src="/picture/css20080501.jpg" width=224>
<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow(Color=#987cb9,Offx=10,Offy=5,Positive=1)" src="/picture/css20080501.jpg" width=224>
(Color=颜色;offx=横向位移;offy=纵向位移;Positive=非透明或透明像素建立可见投影1或0)
⑦镂空
<IMG style="FILTER: Mask()" src="/picture/css20080501.jpg">
原图
对照图(在上面,看不到哦)
四、图片定位(align=right图片居右 hspace水平间距 vspace垂直间距)
<img src="/picture/css20080501.jpg" width=224 align=right hspace="5" vspace="5">
五、添加图片说明
<img src="/picture/css20080501.jpg" width=224 alt="原来你也在这里">
本篇文章来源于 Goldtimes.net 原文链接:http://www.goldtimes.net/teach/view/1081.htm
分享到:
相关推荐
网站开发所需样式
原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-radius:5px} 对图片设置...
;单元2-1 层叠样式表种类;;;;;;;;;...background-image:url(img/bg.gif);...第一:样式表的语法;...第二:样式表的作用;...第三:样式表种类: ...”stylesheet”type=”text/css”href=”外部样式表文件名” >;
搭建bootstrap所需的文件,其中包括css、js、fonts 三部分
50个CSS超炫丽button样式代码,压缩包内涵css、img、html文件,截图地址http://g.hiphotos.baidu.com/image/w%3D310/sign=6b6e4be97f899e51788e3c1572a6d990/8718367adab44aed70e726f0b71c8701a18bfb7d.jpg
在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的...
border-spacing:0}a img {border:none;} /* container,clearfix */ .container:after, .clearfix:after {clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}....
动静分离案例所需要用的样式(css/js/img) 在nginx目录下创建一个static目录,或者把改文件解压后直接放到nginx目录下即可
在网页中加载闪存文件系统中的图片、CSS和JavaScript资源。...main.css:控制网页的css(层叠样式表) ...img目录中的图片taichi-maker.jpg:此图片用于演示如何在ESP8266开发板所建立的物联网页面中显示图片
导入样式表的方法(示范) <style type="text/css" media="all" title="应用于所有媒体的样式"> @import url(/style/css/global.css);...@import 必须放置在常规样式之前,不管是在中还是在外部样式表中。
reset.css--->覆盖浏览器默认的css样式 img--->存放页面所有的图片文件(.jpeg、.jpg、.png等图片) js--->方便一些功能的实现 jquery.min.js--->jquery框架的js文件 main.js---> 页面点击 视频显示的实现 media...
首先做好准备工作: > 第一步,先把 CSS 原本的路径存到 $url 变量里,然后把 CSS 的内容保存在 abc.css 中。 > 因为考虑到经常碰到多个 CSS 文件的状况,所以小邪没有直接填一个 CSS 路径。 > 而是把几个 CSS 文件...
将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现...
CSS 清除默认样式 通常的清除默认样式: *{ margin:0; padding:0 } li{ list-style:none } img{ vertical-align:top; border:none } 设置默认字体 body, button, input, select, textarea /* for ie */ { ...
css字体样式:font-family设置字体系列,font-size设置字体大小,font-weight设置字体粗细,font-style设置字体样式,color设置字体颜色的三种形式,font的简写; css文本样式:使用text-decoration添加文本修饰,...
2.还原的图片保存到相应的CSS同级目录下的【CssBase64ToImg】文件夹里 命令行使用方法(请使用绝对路径): CssImgBase64 E:\1.png 或 CssImgBase64 "E:\1.png" CssImgBase64 E:\1.css 或 CssImgBase64 "E:\1.css" ...
/******** 全局共用属性CSS ********/ *{margin:0;padding:0;} body{color: #353535;background:#fff;font:12px/22px Verdana,Arial,sans-serif,"Times New Roman",宋体;text-align:center;} body,ul,ol,li,p,h1,h2,...
1 ...1.1. HTML与CSS的关系 4 1.2. 标签 4 ...1.4. head标签 7 1.5. body标签 8 ...5.1. <img>标签:为网页添加图片 16 ...5.3. 标签 target属性:在窗口中打开链接 17 ...7. CSS3介绍 29 ...15. CSS3样式设置小技巧 29