box-shadow 给图片添加内部阴影

box-shadow 是css3中定义的设置元素阴影的属性,其语法结构如下:

 <shadow> = inset? && <length>{2,4} && <color>?

1st <length>为水平位置的偏移 必选

2nd <length>为竖直方向偏移 必选

3rd <length>为模糊化的指数 可选

4th<length> 为模糊的扩散距离 可选

inset 表示十分位内部偏移 可选

color 为阴影的颜色

但是如果我们想要给图片设置内部偏移的阴影时,就会导致我们设置的阴影被图片给挡住。

为了解决这个问题,我们可以通过设置和图片一样大小的遮罩的方式进行解决:

.img-box-shadow{
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow:  0px 0px 30px 10px gray inset;
        -moz-box-shadow:  0px 0px 30px 10px gray inset;
        -webkit-box-shadow:  0px 0px 30px 10px gray inset;
}

该元素是定位到父级元素内的,所以要给父级元素设定 position:relative;

当然既然我们使用了css3的样式,我也可以通过给父级元素直接添加伪类元素的方式进行修改,而且减少了dom元素的使用,使得样式和内容进行了分离,也正是伪类元素真正被引入的目的:

.img-wrapper{
   position:relative;
}

.img-wrapper:before{
   position:abosolute;
   width:100%;
   height:100%;
   box-shadow:  0px 0px 30px 10px gray inset;
   -moz-box-shadow:  0px 0px 30px 10px gray inset;
   -webkit-box-shadow:  0px 0px 30px 10px gray inset;
}

网上还有通过js的方式,将img替换为div,图片修改为背景的方式,实现图片的内部阴影效果的实现。这里我们不进行推荐,因为你要使用box-shadow的话,浏览器必须支持css3属性,使用能够使用css3的话,我们没有必要再将我们的样式效果交给js进行处理,这样大大违背了css3将页面元素、样式和逻辑相互分离的目的。

时间: 2024-10-06 10:46:10

box-shadow 给图片添加内部阴影的相关文章

万彩动画大师给图片添加倒影、阴影、模糊等装修效果

给图片添加倒影.阴影或者模糊等装修效果,可以提高动画视频的艺术感和专业感. 1. 给图片添加倒影的装修效果 单击选中图片,在右边属性栏中找到[样式],点击[样式]里面的滚动条,滑到[倒影]的样式,选择其中一个倒影效果的样式即可,如下图所示: 2. 给图片添加阴影的装修效果 鼠标单击选中图片,在画布的右边属性栏中找到并点击[装修效果],弹出[装修效果]小窗体,然后点击[效果],设置阴影前记得先钩选中[应用阴影],然后就可以设置阴影了,最后点击[确定],如下图所示: 3. 给图片添加模糊的装修效果

php给图片添加文字水印方法汇总

在php中要给图片加水印我们需要给php安装GD库了,这里我们不介绍GD库安装,只介绍怎么利用php给图片添加文字水印的4种方法的汇总.有需要的小伙伴可以参考下. 1: 面向过程的编写方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image_type_to_ex

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

盒子里面放了img标签,盒子浮动后,盒子的背景图片(就是阴影图片)会应用图片的宽高. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 核心技术就是float:left ,clear:ri

使用CSS为图片添加边框的几种方法

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

UWP Button添加圆角阴影(三)

原文:UWP Button添加圆角阴影(三) Composition DropShadow是CompositionAPI中的东西,使用Storyboard设置某个属性,就是频繁的触发put_xxx()方法,效率远远不如使用CompositionAnimation. Composition对象的基类CompositionObject拥有一个属性叫ImplicitAnimations,可以通过他实现累死css的transition的效果,也就是对应属性修改的时候,平滑的过渡过去. 可以从DropSh

UWP Button添加圆角阴影(二)

原文:UWP Button添加圆角阴影(二) 阴影 对于阴影呢,WindowsCommunityToolkit中已经有封装好的DropShadowPanel啦,只要引用Microsoft.Toolkit.Uwp.UI.Controls这个Nuget包就可以使用啦. 直接把阴影套在咱们的圆角Button外面呢,会出现圆角的Button映出直角的阴影的丑陋状况.对于这种情况肯定是有处理方式的. 看DropShadowPanel的源码,对Content的特殊类型做了处理.下面我详细的说下. Compo

iOS给图片添加滤镜&amp;使用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中的缩放图片的