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

2016-02-20 00:06 64 1 收藏

今天图老师小编给大家展示的是CSS实例:通过定义渐变边框给图片加阴影，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！

【 tulaoshi.com - Web开发】

一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？

我们可以采取视觉欺骗大法定义渐变边框来实现

运行代码框
!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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /meta http-equiv="Content-Language" content="zh-CN" /title/titlestyle 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/headbodya class="pic-shadow" href="#" title=""img src="http://www.webjx.com/files/090706/1_143114.png" alt="" title="" //a/body/html
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

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

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

当然了，特殊要求的话可以使用ie的滤镜来实现更华丽的阴影
反对滤镜主义者飘过你们自己gg去

来源:http://www.tulaoshi.com/n/20160220/1631254.html

上一篇：系统进程尽在掌握细看Win8全新任务管理器
下一篇： CSS网页设计：IE8和IE7共存

看过《CSS实例:通过定义渐变边框给图片加阴影》的人还看了以下文章更多>>

CSS教程(2)：通过实例学习CSS背景

标签： Web开发

本教程一共三个例子：1、设置背景颜色;2、设置文本的背景颜色;3、将图像设置为背景。参考网页教学网关于CSS背景的理论知识：CSS教程(1)：学习CSS背景相关知识 1、设置背景颜色本例演示如何为元素设置背景颜色。 html head style type="text/css" body {background-color: yellow} h1 {background-color: #00ff00} h2 {backg...

CSS教程(4)：通过实例学习CSS背景

标签： Web开发

本教程介绍：1.如何仅显示一次背景图像，2.如何放置背景图像，3.如何使用%来定位背景图像。参考网页教学网关于CSS背景的理论知识：。 1、如何仅显示一次背景图像本例演示如何仅显示一次背景图像。 html head style type="text/css" body { background-image: url('/i/eg_bg_03.gif'); background-repeat: no-repeat } /style /...

CSS教程(3)：通过实例学习CSS背景

标签： Web开发

本教程一共三个例子：1、如何重复背景图像;2、如何在垂直方向重复背景图像;3、如何在水平方向重复背景图像。参考网页教学网关于CSS背景的理论知识：。 1、如何重复背景图像本例演示如何重复背景图像。 html head style type="text/css" body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat } /style...

CSS实例代码:网页背景渐变

标签： Web开发

网页背景渐变是经常用到的效果，下面用的滤镜，当然在非IE下是没效果的。一、从上往下渐变 body{ FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)"; } 二、从左上至右下渐变 body{ FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= ...

CSS定义标题的实例讲解

标签： Web开发

简单的样式使用CSS，最容易做的事情就是给我们的标题设置不同的字体样式。我们可以建立一个CSS规则，它将把样式应用到页面中出现的所有h1标签（或者是整个站点，当使用一个外部样式表的时候）。随后，如果我们想要改变整个站点上所有出现h1标签的地方的颜色、尺寸、字体的话，我们所有需要做的事情就是修改一些CSS规则，然后它们将立即改变。听...

查看更多精彩>>