CSS完美实现图片阴影效果

最新推荐文章于 2022-04-20 20:11:06 发布
最新推荐文章于 2022-04-20 20:11:06 发布
阅读量121 收藏
点赞数
文章标签： php 
<title>无标题文档</title>
<style type="text/css">
/*方法一：使用一个GIF文件的方法*/
   .gifshadow 
{
    padding:4px 10px 10px 4px;
    border:0;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    background-image: url(shadow.gif);/*换成你的图片*/
    background-repeat: no-repeat;
    background-position: right bottom;
}
/*方法二：使用滤镜*/
   .cssshadow 
{
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
/* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
/*方法三：使用2个PNG图片，滑动门技术，可实现柔边阴影*/
   .pngshadow{
            float:right;
    background:url(right_buttom.png) no-repeat bottom right;
    padding:0 10px 10px 0;

}
        .pngshadow div{
    background:url(left_top.png) no-repeat ;
}
        .pngshadow img {
            border:1px solid #FFFFFF;
            padding:4px;
}
</style>
</head>
<body >
效果1:
<img class="gifshadow" src="1.jpg"/>

效果2:
<img class="cssshadow" src="1.jpg" />

效果3:
<div class="pngshadow">
<div><img src="1.jpg" /></div>
</div>
</body>
</html>


源码资源文件下载：html.rar

http://www.rupeng.com/forum/viewthread.php?tid=14033&pid=101125&page=2&extra=#pid101125

weixin_33781606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS3】 CSS3实现“图片阴影”效果
O(∩_∩)O
02-24 1万+
学习前端有点类似于学习英语，很多东西需要一点点累积，下面讲解CSS3实现图片阴影效果。 1、实验效果 2、原理分析 3、源程序
CSS3 完美实现圆角效果
09-27
在实际项目中，通常会结合其他CSS3属性，如`box-shadow`（阴影效果）和`background-image`（背景图片）等，来创建更丰富的界面元素。 总之，`border-radius`是CSS3中的一个重要特性，它使得创建圆角效果变得更加...
css给图片添加阴影效果方法
热门推荐
徊忆羽菲
01-07 1万+
css给图片添加阴影效果方法box-shadow属性代码 box-shadow属性 css可以实现很多的图片效果，图片阴影效果就是其中之一，那么css如何给图片添加阴影效果？本篇文章就给大家介绍如何使用css给图片添加阴影（附代码），让大家了解css给图片加阴影的两种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。 首先我们来看看css给图片添加阴影效果的第一种方法：设置box-shadow属性，通过一个简单的代码示例来看看box-shadow属性的实现方法。 代码 <html&g
CSS基础知识（五）CSS背景 阴影及圆角边框
weixin_65548623的博客
04-20 5076
文章目录一、CSS背景属性1.背景颜色（background-color）2.背景图片（background-image）3.背景平铺（background-repeat）4.背景图片位置（background-position）5.背景图片固定（background-attachment） 一、CSS背景属性 1.背景颜色（background-color） 属性值：transparent(透明的)或color(颜色) 2.背景图片（background-image） 属性值：none(没有)或url
css给图片底部加阴影,使用CSS给图片添加阴影的方法
weixin_30923925的博客
08-04 3331
网页制作poluoluo文章简介：一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？我们可以采取“视觉欺骗大法”——定义渐变边框来实现：body {background:#2e334d;}img {border:none;}a.pic-shadow {display:inline-block;...
html中图片阴影怎么写,css怎么在图片上加阴影？
weixin_33856202的博客
05-31 5619
css怎么在图片上加阴影？下面本篇文章给大家介绍一下使用CSS在图片上加阴影的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。方法1：设置box-shadow属性box-shadow属性可以设置一个或多个下拉阴影的框。通过一个简单的代码示例来看看box-shadow属性的实现方法。css 图片阴影--box-shadow属性img{width: 400px;height: 3...
CSS3 实现图片翘边阴影、边框阴影效果代码.rar
07-09
这是一个纯粹的CSS3效果，模拟实现Pseudo-Classes模拟卡片翘边阴影效果、方框边框阴影效果，IE8及以下浏览器对CSS3不感冒，童鞋们就不要试了，但完美支持ie9、chrome、safari、firefox、opera、360等浏览器。...
javascript+css3.0完美效果实现
07-13
"javascript+css3.0完美效果实现"这一主题旨在探讨如何巧妙地结合这两者，以实现网页设计的卓越效果。 JavaScript，作为客户端脚本语言，主要负责网页的动态功能，如表单验证、时间动画、用户交互等。它的灵活性和...
CSS3 shadow图片翘边阴影、边框阴影效果
05-12
摘要:脚本资源,CSS特效,CSS图片阴影　这是一个纯粹的CSS3效果，模拟实现Pseudo-Classes模拟卡片翘边阴影效果、方框边框阴影效果，不过经测试貌似不兼容IE8，但完美支持ie9、chrome、safari、firefox、opera、360等...
CSS实现绝对的完美圆角框
09-27
最后，VML（Vector Markup Language）在IE浏览器中可以用来绘制圆角，它提供了一种无图片、平滑且可设置阴影边框的圆角框实现方式。VML圆角半径可自由调整，重用性强，颜色设置灵活，结构无冗余，圆角平滑。然而，它...
纯CSS实现鼠标移上图片添加阴影效果
06-22
纯CSS实现鼠标移上图片添加阴影效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
CSS 给图片添加阴影
song_song321的博客
01-09 613
box-shadow: 10px 10px 10px rgba(0,0,0,.5); 第1个参数：x轴偏移量 可以为负值 第2个参数：y轴偏移量可以为负值 第3个参数：高斯模糊度 第4个参数：阴影颜色及透明度
CSS实现图片阴影效果
半路程序员
11-24 1318
无标题文档    /*方法一：使用一个GIF文件的方法*/    .gifshadow     {     padding:4px 10px 10px 4px;     border:0;     border-top:#eee 1px solid;     border-left:#eee 1px solid;     background-image: url(shadow
css样式实现给图片添加阴影效果
迷失曾经
04-12 1万+
css网页样式实现给图片添加阴影效果 实现原理:定义渐变边框来实现 详细代码：    body {background:#2e334d;} img {border:none;} a.pic-shadow {display:inline-block;zoom:1;padding:1px;backgroun
css3图片阴影--曲线阴影/翘边阴影
TSeven37的博客
08-08 1220
  把box-shadow的x和y都设置为0，阴影从四边同时出现 设置box-shadow时注意浏览器兼容性 如果是正的 分别距离左边上面像素高度 一般不设置阴影的距离     1.border-radius: 100px /10px; 水平方向半径 / 垂直方向半径 2.设置盒子的宽高有两种方法第一种是直接设置width和height;第二种是设置position:absolut...
【css】给图片添加内阴影
Cvory
11-21 1713
需求：给图片添加内阴影 原理： 给img外面套一个div 加给div不会生效 因为图片会遮住 <div class='box-shadow'> <img src='https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg'> </div> css: .box-shadow { display:i...
CSS3实现“图片阴影”效果
web前端学习部落22群
12-29 4838
CSS3实现“图片阴影”效果 box-shadow body{font-family:Arial;     font-size:23px;} .wrap h3{  text-align:center;  position:relative;  top:80px; } .wrap {  width:70%;  height:200px;  backgrou
css3照片特效阴影（曲线投影和翘边投影）
花花的博客
06-11 3895
主要语法1、实现阴影box-shadow: h-shadow v-shadow blur spread color inset参数： h-shadow (必需)：水平阴影的位置。允许负值。 v-shadow (必需)：垂直阴影的位置。允许负值。 blur (可选)：模糊程度，值越大越模糊。 spread (可选)：阴影的尺寸。 color (可选)：阴影的颜色。请参阅...
img设置内阴影
lanjingling09的专栏
11-21 4039
最近学习网页，发现html中的img标签无法直接设置内阴影（如图1）。 图1相应代码：<style type="text/css"> div{width: 810px;height: 450px;margin-bottom: 20px;} i
css实现图片翻转效果
最新发布
04-26
要实现图片翻转效果可以使用CSS3的transform属性。首先设置要翻转的图片的父元素为perspective属性，然后使用rotateY属性来完成翻转。比如，可以使用以下代码来实现一个鼠标悬浮翻转的效果： HTML代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值