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

2016-02-20 00:06 59 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去

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

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

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

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开发

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

Photoshop通过字体实例解析内阴影功能

标签： PS PS基础

PS的图层样式一直都是大家添加特效的有力武器，比如投影、描边什么的，他们不会破坏图层原本的信息，真是非常好用。有了正确的知识和一定的经验以后，几乎可以完成任何特效，为了实现这些效果，你需要了解每个功能都是干什么的，其中一些设置是怎么控制特效的变化的。希望看完了这一系列的教程，你能解开封印，做出更棒的作品。内阴影的应用...

WPS文字如何给页面加边框

标签：电脑入门

页面边框是什么?页面边框就是在一个页面上添加上一些边框让文档更加的醒目和好看。页面边框主要用于在WPS文档中设置页面周围的边框，可以设置普通的线型页面边框和各种图标样式的艺术型页面边框，从而使Word文档更富有表现力。那么WPS文字如何为页面添加边框呢?很简单，在你想加边框的页，全选这页的内容，点击格式--边框和底纹--页面边框--设...

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= ...

查看更多精彩>>