css2.1实现图片添加阴影效果

盒子里面放了img标签，盒子浮动后，盒子的背景图片（就是阴影图片）会应用图片的宽高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 核心技术就是float:left ,clear:right,
        盒子脱离文挡流后，背景图片会应用盒子的高度*/
        .shadow{
            border: 1px solid red;
            background: url(‘img/shadow.gif‘) no-repeat bottom right;
            /* margin: 5px; */
            float: left;
            clear: right;
        }
        .shadow img{
            display: block;
            width: 300px;
            height: 300px;
            /* 向左上角偏移5px */
            /* margin: -5px 5px 5px -5px; */
            /* 或者使用相对定位 */
            position: relative;
            top: -5px;
            left: -5px;
            /* border: 1px solid red;
            padding: 4px; */
        }
    </style>
</head>
<body>
    <div class="shadow">
        <img src="img/dunstan.jpg">
    </div>
</body>
</html>

为了显示效果明显，我给背景图案加了边框，只要图片大小不超过背景图片都能实现阴影边框，演示地址：http://down.yesyes.wang/book/04/shadow.html

时间： 2024-08-03 14:31:17

css2.1实现图片添加阴影效果的相关文章

css3实现小米商城鼠标移动图片上浮阴影效果

今天在编程爱好者编码库看见一个好玩的程序,代码如下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta http-eq

css的应用十分广泛,即便用在图片的效果中也是方法多样,本文下面就介绍五种为图片添加特殊效果边框的CSS写法阴影效果通过使用带有一些padding之的背景图来添加阴影效果. HTML <img class=”shadow” src=”sample.jpg” alt=”" /> CSS img.shadow { background: url(shadow-1000×1000.gif) no-repeat right bottom; padding: 5px 10px 10px 5p

自定义控件三部曲之绘图篇（十六）——给控件添加阴影效果与发光效果

前言:要么出击,要么出局,命运女神总会眷顾拼劲全力的一方相关文章: <Android自定义控件三部曲文章索引>:http://blog.csdn.net/harvic880925/article/details/50995268 这节我们将学到如下内容: 传统地给按钮添加阴影的方法如何给已有控件添加阴影如何给图片添加阴影一.layerlist给按钮添加阴影效果给控件添加阴影有很多方法,但平常我们给按钮添加阴影最常用的就是使用layerlist多层绘图来添加阴影效果,我们先来看一下给按

iOS给图片添加滤镜&使用openGLES动态渲染图片

给图片增加滤镜有这两种方式: CoreImage / openGLES 下面先说明如何使用CoreImage给图片添加滤镜, 主要为以下步骤: #1.导入CIImage格式的原始图片 #2.创建CIFilter滤镜 #3.用CIContext将滤镜中的图片渲染出来 #4.导出渲染后的图片参考代码: 1 //导入CIImage 2 CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"hua"]]

街机扫描线之为图片添加扫描效果

为图片添加一些额外效果,会使图片更耐看一些,下面来看看如何为一张普通图片添加扫描效果. 首先是下载软件,可到软件主页下载:街机扫描线_v10(正式版) 看一下制作先后的对比图: 原图效果: 制作后加入了扫描效果的效果图: 用街机扫描线制作这种效果图只需简单的几步操作即可完成,貌似用PS做这种效果图也可以做出来,但是会很复杂.下面说一下制作方法. 1.用任意看图软件或浏览器打开一张需要制作扫描效果的图片,也可直接在网页上制作. 2.下载街机扫描线之后解压到任意目录,运行街机扫描线_v10(正

android项目之记事本（12） ----- 图片的等比例缩放及给图片添加边框

本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中经常会遇到图片的缩放,就比如记事本,现在的图片都比较大,如果将原图不经缩放直接放在屏幕上,则会占满整个屏幕,而且有时图片会比屏幕还大,这时就不能完全的显示整个图片,所以,必须要进行缩放,但在缩放时,该如何缩放呢,长和宽的缩放比例设置为多少合适呢,为了保持原图的纵横比,所以要最好的方法就是约束缩放比例,也就是等比例缩放,相信大家都用过PS中的缩放图片的

python脚本实现自动为png类型图片添加@2x后缀

@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/css/cuteeditor.css); @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/css/cuteeditor.css); 美术们总是忘记或者因为其它

php 图片添加文字水印以及图片合成(微信快码传播)

1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPath)); $font = 'msyhl.ttc';//字体 $black = imagecolorallocate($img, 0, 0, 0);//字体颜色 RGB $fontSize = 20; //字体大小 $circleSize = 60; //旋转角度 $left = 50; //左边距

第二天——UM编辑器布置以及图片添加

今天是第二天,我早上起来开始尝试实现使用UMeditor文本编辑器添加图片,弄了一天,终于弄好了!其实早就应该弄好的,但是我没有导入jar包,所以不能实现图片的上传,我也是够蠢的.现在我就来总结一下图片的上传吧: 1.从“百度编辑器”官网上下载UM编辑器 2.将其解压到任意位置,解压后文件夹内的内容有以下几个: 其中那个index.html可以删除,那是个例子,如果不会部署可以参照一下,我之前就是参照这个的. 3.将这个文件夹拷到自己的web项目底下 4.现在就是导jar包,引入js.css文件