定义渐变边框给图片加阴影

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

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

  代码:

<!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="止.png" alt="" title="" /></a>
</body>
</html>

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

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

  颜色代码可以在ps中做好外发光效果后拾取。

  我上面的效果是[柔和]、[扩展0]、[大小5px]、[颜色#000]其余默认

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

 

时间: 2024-09-04 15:48:11

定义渐变边框给图片加阴影的相关文章

可以用CSS为图片加阴影吗?

在网页中插入图片是再平常不过的事情了,但更多的时候为了美观的需要,我们要给图片加上阴影,图片数量较多的时候,工作量是非常大的.重复劳动而且没有工作效果.我们有没有办法用CSS给图片加阴影呢? CSS中有一个概念大家应该都不陌生,那就是相对定位position:relative; .我们应该学会灵活的运用CSS所提供的属性.给图片加阴影我们就可以用position:relative; 相对定位的办法来实现.关于position属性可以参考这里. 我们看下面的css代码:  代码如下 复制代码 .w

CSS如何定义图片加阴影

 代码如下 复制代码 <!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=&qu

ps快速给图片加边框

  Photoshop(简称ps)是一款强大的平面设计工具,它可以帮助我们完成很多工作小到日常修个图片照片大到可以利用它制作视频动画.功能很多很强大肯定是它的优势,但是这同时也给很多初学者带来了很大的学习成本,比如说利用ps给图片加边框可以通过很多途径实现,但对于初学者来说我们如何可以快速完成这个操作呢?下面我给大家分享下我的经验. 方法/步骤 1.首先将要处理的图片放到电脑桌面上这样做可以提高工作效率,然后在桌面上找到ps图标双击打开ps软件(ps软件需要占用的内存较大打开过程可能需要几秒钟)

js实现鼠标悬浮给图片加边框的方法_javascript技巧

本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href=&qu

图片加水印软件哪款好

  图片加水印软件一:photoshop photoshop作为世界通用的强大图片处理工具,不要说加水印了,任何图片处理技术都能实现. 图片加水印软件二:光影魔术手 便捷的文字和水印功能 文字水印可随意拖动操作.横排.竖排.发光.描边.阴影.背景等各种效果,让文字加在图像上更加出彩,更可保存为文字模板供下次使用.多种混合模式让水印更加完美,快来试试吧! 图片加水印软件三:美图秀秀 傻瓜级新手操作实用软件,美图秀秀pc最新版软件是一款最简单实用的免费图片处理软件,使用这款美图秀秀软件不需要您去学习

Android图片加载库Fresco

在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4byte的空间.如果手机的屏幕是480*800,那么一张屏幕大小的图片就要占用1.5M的内存.手机的内存通常很小,特别是Android设备还要给各个应用分配内存.在某些设备上,分给Facebook App的内存仅仅有16MB.一张图片就要占据其内存的十分之一. 当你的App内存溢出会发生什么呢?它当

异步图片加载、内存、磁盘缓存

该类实现的功能: 1. 异步加载远程图片 2. 图片内存缓存 3. 异步图片磁盘缓存 package com.ai9475.util; import android.graphics.Bitmap; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.os.Handler; import android.os.Message; impo

fackbook的Fresco (FaceBook推出的Android图片加载库-Fresco)

[Android开发经验]FaceBook推出的Android图片加载库-Fresco   欢迎关注ndroid-tech-frontier开源项目,定期翻译国外Android优质的技术.开源库.软件架构设计.测试等文章 原文链接:Introducing Fresco: A new image library for Android 译者 : ZhaoKaiQiang 校对者: Chaossss 校对者: bboyfeiyu 校对者: BillionWang  校对者: dujinyang 校对

C#为图片加水印代码

using System; using System.IO; using System.Collections; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; namespace Imag_writer { /// <summary> /// 水印的类型 /// </summary> public enum WaterMarkType { /// <sum