使用CSS给图片添加阴影的方法_css好看的标题资源-CSDN文库

border-radius

11 浏览量 2020-12-03 10:33:13 上传评论收藏 37KB PDF 举报

资源推荐

资源详情

资源评论

使用使用CSS给图片添加阴影的方法给图片添加阴影的方法

一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？我们可以采取“视觉欺骗大法”——定

义渐变边框来实现：

<!DOCTYPE html

PUBLIC “-//W3C//DTD

XHTML 1.0

Transitional//EN”

“http://www.w3.org/TR/xh

tml1/DTD/xhtml1-

transitional.dtd”>

<html

xmlns=”http://www.w3.or

g/1999/xhtml”>

<head>

<meta http-

equiv=”Content-Type”

content=”text/html;

charset=utf-8″ />

<meta http-

equiv=”Content-

Language” content=”zh-

CN” />

body

{background:#2e334d;}

img {border:none;}

a.pic-shadow

{display:inline-

block;zoom:1;padding:1p

x;background:#262a3f;bo

rder:solid #2b3048

1px;border-radius:5px;-

moz-border-radius:5px;-

webkit-border-

radius:5px;}

a.pic-shadow img

{padding:1px;background

:#13151f;border:solid

#1e2132 1px;border-

radius:5px;-moz-border-

radius:5px;-webkit-

border-radius:5px;}

</style>

</head>

<body>

<a class=”pic-shadow”

href=”#” title=””><img

src=”http://huoche.7234.c

n/images/jb51/yhoztfqw2

3s.png” alt=”” title=”” />

</a>

</body>

</html>

提示：您可以先修改部分代码再运行

下面这段定义是各标准浏览器中圆角定义，用以更专业地欺骗眼睛

复制代码代码如下:

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

颜色代码可以在ps中做好外发光效果后拾取。我上面的效果是[柔和]、[扩展0]、[大小5px]、[颜色#000]其余默认

当然了，特殊要求的话可以使用ie的滤镜来实现更华丽的阴影。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论收藏

内容反馈

weixin_38698149

粉丝: 5
资源: 937

使用CSS给图片添加阴影的方法

HTML CSS 阴影效果

23种css3图片阴影效果

阴影添加shadow.html

纯CSS3实现DIV高亮显示+阴影

给图片添加阴影效果

图片添加阴影效果

纯CSS实现鼠标移上图片添加阴影效果

CSS给图片添加阴影,并且等比例缩放图片

用CSS为表格添加阴影效果.rar

给图片加阴影

纯CSS实现鼠标移上图片添加阴影效果.rar

CSS3图片相册立体阴影效果

css3鼠标悬停图片内部放大和阴影特效

有图片带阴影的CSS圆角实例包

dropshadows:使用CSS过滤器生成的阴影的配置器

给图片添加阴影[DropShadowBlt.rar]-精品源代码

CSS中使用文本阴影与元素阴影效果

使用GD库生成带阴影文字的图片

CSS-5种图片效果及效果预览(自动加水印，加文字说明，阴影效果，双边框效果，图片外框效果)

CSS3图片放大阴影遮罩层特效特效代码

CSS3实现各种网页上文字及图片阴影的立体显示特效.rar

5种CSS图片效果及效果预览

纯CSS实现的当鼠标移上图片添加阴影效果代码

Android实现图片阴影效果的方法

HTML5 Canvas阴影使用方法实例演示

IE6中觉得PNG格式图片阴影的方法

最新资源