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

Me_Alter

Me_Alter

2016-02-20 00:06

下面图老师小编要向大家介绍下使用CSS给图片添加阴影的方法,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢?我们可以采取视觉欺骗大法定义渐变边框来实现:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta http-equiv="Content-Language" content="zh-CN" /
title/title
style type="text/css"
body {background:#2e334d;}
img {border:none;}
a.pic-shadow {display:inline-block;zoom:1;padding:1px;background:#262a3f;border: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://www.blueidea.com/articleimg/2009/07/6846/demo.png" alt="" title="" //a
/body
/html

    下面这段定义是各标准浏览器中圆角定义,用以更专业地欺骗眼睛
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

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

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

使用CSS给图片添加阴影之入门篇

Web开发
使用CSS给图片添加阴影之入门篇

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop使用4种方法给文字添加长阴影

PS PS基础
Photoshop使用4种方法给文字添加长阴影

Photoshop使用4种方法给文字添加长阴影教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop使用4种方法给文字添加长阴影教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS实例:通过定义渐变边框给图片加阴影

Web开发
CSS实例:通过定义渐变边框给图片加阴影

如何使用PS给图片添加光线效果

PS教程 ps平面设计教程 PS效果
如何使用PS给图片添加光线效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

win10隐藏开机启动或强制开机启动

win10隐藏开机启动或强制开机启动

Firefox Bug: inline/inline-block的间隙

Firefox Bug: inline/inline-block的间隙
下拉加载更多内容 ↓