CSS3实现“图片阴影”效果

最新推荐文章于 2024-06-21 11:27:52 发布
最新推荐文章于 2024-06-21 11:27:52 发布
阅读量4.8k 收藏
点赞数
文章标签： 前端

CSS3实现“图片阴影”效果

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>box-shadow</title>

<style type="text/css">

body{font-family:Arial;

    font-size:23px;}

.wrap h3{

 text-align:center;

 position:relative;

 top:80px;

}

.wrap {

 width:70%;

 height:200px;

 background:#FFF;

 margin:40px auto;

}

 

.effect{

 position:relative;      

    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0,0.1) inset;

        -moz-box-shadow:0 1px 4px rgba(0, 0, 0,0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

                                box-shadow:0 1px 4pxrgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;

}

 .effect:before, .effect:after{

   content:"";

         position:absolute;

         z-index:-1;

         -webkit-box-shadow:00 20px rgba(0,0,0,0.8);

         -moz-box-shadow:00 20px rgba(0,0,0,0.8);

         box-shadow:00 20px rgba(0,0,0,0.8);

         width:90%;

         height:50%;

         bottom:0;

         left:5%;

         -moz-border-radius:100px/ 10px;

         border-radius:100px/ 10px;

}

 

ul.box {

         width:980px;

         height:auto;

         margin:20px auto;

         padding:0;

         clear:both;

         overflow:hidden;

}

 

ul.box li {

         list-style-type:none;

         margin:20px10px;

         padding:0;

         width:300px;

         height:220px;

         border:2px solid #efefef;

         position:relative;

         float:left;

         background:#ffffff; /* old browsers */

         line-height:220px;

         font-size:32px;

         text-align:center;

        

        

         -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

         -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

         -o-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

         box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;

        

}

 

ul.box li:before {

          z-index: -2; 

         position:absolute;

         background:transparent;

         width:90%;

         height:80%;

         content:'';

         left:20px;

         bottom:8px;

        

          -webkit-transform: skew(-12deg) rotate(-4deg);

                 -moz-transform:skew(-12deg)rotate(-4deg);

                 -o-transform:skew(-12deg) rotate(-4deg);

                 -ms-transform:skew(-12deg) rotate(-4deg); 

        

         -webkit-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

         -moz-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

         -o-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

         box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

        

}

 

 ul.box li:after {

         z-index:-1;

         position:absolute;

         background:transparent;

         width:90%;

         height:80%;

         content:'';

         right:20px; 

         bottom:8px;

        

         -webkit-transform:skew(12deg) rotate(4deg);

         -moz-transform:skew(12deg)rotate(4deg);

         -o-transform:skew(12deg) rotate(4deg);

         -ms-transform:skew(12deg) rotate(4deg);

        

         -webkit-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

         -moz-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

         -o-box-shadow:0 8px 20px rgba(0, 0, 0, 0.6);

         box-shadow:0 8px 16px rgba(0, 0, 0, 0.6);

 

} 

 

.box li img{

         width:290px;

         height:210px;

         padding:5px;

}

</style>

</head>

<body>

 <div class="wrap effect">

    <h3>Shadow Effect</h3>

 </div>

 <ul class="box">

     <li><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=38fbc9d4a23e509358260d148b5bd91c"/></li>

     <li><imgsrc="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=6f4c7da09233943a37758a2dac1ebb57"/></li>

     <li><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201612/28/162513p62lbbsn61uqaap6.jpg.editor.jpg"/></li>

 </ul>

</body>

</html>

 

效果图预览：


fanyuenan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS3】 CSS3实现“图片阴影”效果
O(∩_∩)O
02-24 1万+
学习前端有点类似于学习英语，很多东西需要一点点累积，下面讲解CSS3实现图片阴影效果。 1、实验效果 2、原理分析 3、源程序
23种css3图片阴影效果
07-19
纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。
CSS 添加阴影（附代码案列讲解）
最新发布
(黎子)人生编码
06-21 587
CSS 阴影为网页元素添加了一种视觉效果，它可以增强页面的美感和层次感。通过简单的属性，我们可以为元素添加各种阴影效果，让设计更加生动。
css给图片设置阴影效果
weixin_39400507的博客
11-25 1362
css的filter属性给图片设置阴影等其他效果
css3 图片阴影
weixin_33862041的博客
08-14 58
box-shadow:1px 2px 4px #999999; 效果： 转载于:https://www.cnblogs.com/chenhaihui/p/9474323.html
css样式实现给图片添加阴影效果
热门推荐
迷失曾经
04-12 1万+
css网页样式实现给图片添加阴影效果 实现原理:定义渐变边框来实现 详细代码：    body {background:#2e334d;} img {border:none;} a.pic-shadow {display:inline-block;zoom:1;padding:1px;backgroun
CSS3在线实现图片阴影效果.zip
09-25
【CSS3在线实现图片阴影效果.zip】这个压缩包文件包含了一种使用CSS3技术来创建图片阴影效果的方法。CSS3是CSS（层叠样式表）的最新版本，它引入了许多新特性和功能，使得网页设计更为丰富和动态。在这个项目中，...
CSS3在线实现图片阴影效果
06-12
本文将深入探讨如何使用CSS3在线实现图片阴影效果，以及它对设计师工作流程的影响。 首先，CSS3的阴影效果主要包括`box-shadow`和`text-shadow`两个属性。`box-shadow`用于为元素添加盒阴影，而`text-shadow`则是为...
12种炫酷CSS3图片切换过渡效果
12-29
11. **阴影过渡**：`box-shadow`属性可以控制元素的阴影，通过改变阴影的大小、颜色，可以实现图片边缘阴影的过渡效果。 12. **动画序列过渡**：通过`@keyframes`规则定义动画的关键帧，可以创建复杂的动画过渡，...
CSS3图片相册立体阴影效果.zip
09-25
在这个图片相册中，可能使用了`fadeIn`、`fadeOut`或`slideToggle`等方法来实现图片的切换动画，同时可能还结合了`hover`事件来响应用户的鼠标悬停，触发阴影效果的变化。 然后，JavaScript特效的运用则增强了用户...
css - 为图片添加阴影
weixin_34232617的博客
03-02 277
如果网页底色和图片颜色相同（白色），加个阴影是个非常好的选择。 Show me the code p img { box-shadow: 0 0 10px rgba(0,0,0,0.5); overflow: visible; padding: 10px; } 写p img意思是对 p 标签下的 img 标签生效，防止用错对象。 图片效果测试 ...
HTML5+CSS3实现边框阴影和图片投影3D图片效果源码
09-02
图片的边框有阴影，在图片翻转的时候还有很不错的投影效果。当鼠标滑过页面的时候图片就会出现翻转显示，同时伴随底部阴影跟随的效果，显得非常逼真自然。建议使用支持HTML5与css3效果较好的火狐或谷歌等浏览器。
CSS实现图片阴影效果
半路程序员
11-24 1323
无标题文档    /*方法一：使用一个GIF文件的方法*/    .gifshadow     {     padding:4px 10px 10px 4px;     border:0;     border-top:#eee 1px solid;     border-left:#eee 1px solid;     background-image: url(shadow
用 CSS 实现的阴影效果
[橫渡]
10-22 1515
用 CSS 实现的阴影效果原文出自：A List Apart 作者：Sergio Villarreal中文翻译：onestab [2004.02.28] “…假如有一种技术，用 CSS 对任意块级元素灵活地添加阴影，而且能随着内容的大小自动扩展，还要适用于大多数流行的浏览器，那该有多好！不信么？告诉您，只需写几行代码就能做到。” 阴影效果成了平面设计的一个套路，平面设计师把它当作瑞士军
[WEB前端]图片加阴影效果
Cedric_6的博客
03-13 1425
图片加阴影效果 有时候想要在图片上面添加字，有时候图片太亮所以字不明显或者不美观，因此想要在图片上加阴影效果。 不加阴影 background:url(‘图片的相对路径’) <body> <div style="background:url('image/csdn.jpg');text-align:center;width:500px;height:500px;backgro...
CSS3图片阴影效果解析
whqet
04-09 6982
利用CSS3实现图片阴影效果，在线研究点这里，下载收藏点这里。主要利用transform、z-index、box-shadow实现效果。
css阴影教程,CSS高级技巧:阴影效果
weixin_30667831的博客
08-03 614
上一篇CSS教程 文章：CSS高级技巧:网页布局CSS阴影效果 (Drop Shadows)一点阴影可以给平板的设计增加纵深的感觉, 很多时候我们都是直接用PhotoShop直接制作带阴影的图片以供使用, 这里介绍的是一种不需要修改图片, 而只需要用CSS完成的技巧.原理:给标签增加一个容器, 给容器设置一个大的阴影背景图像, 然后把利用负值外补丁进行偏移, 使阴影落在图像外侧以达到效果.备用的阴...
html圆形头像带阴影,美化图片: CSS3 给图片加圆角和阴影实例
weixin_30999669的博客
06-09 616
css3时代, 美化图片不再那么麻烦, 图片圆角效果, 加个阴影, 只要几行代码搞定, css3给美工生了不少的时间, 省时省力老修花一段时间做了这个css3图片阴影和圆角的效果仅供参考, 当下并不是所有的浏览器都支持这这个效果, 但xp已判死刑, win7下IE9内核已是不可挡.原图设定宽度是300pxcss3给图片加个圆角: style="border-top-left-radius:150p...
HTML5基础加强css样式篇（盒子阴影属性：box-shadow）（三十六）
余正源的博客
04-06 9726
1.box-shadow属性简介： .box { /* .box 默认样式 */ margin: 200px 0 0 200px; width: 200px; height: 200px; background-color:
css3实现鼠标移动图片上浮黑框
05-05
可以使用CSS3的:hover伪类和box-shadow属性实现鼠标移动图片上浮黑框的效果。具体步骤如下： 1.首先给图片添加一个类或者ID，并设置其position属性为relative，如下所示： ```html ``` ```css .float-img { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值