css实现图片翘边阴影

css阴影：

box-shadow 属性用于向框添加一个或多个阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

例如：

box-shadow: 10px 20px 8px rgba(0,0,0,0.3);
/*默认时外部阴影，10px相当于box左端右偏10px，20px相当于box上端下偏20px，8px是模糊距离，
rgba前三个值是颜色，最后一个值是透明度（若不需要透明度则直接写rgb即可）*/

当添加多个阴影时用逗号隔开，可以同时添加内部阴影（后边跟个inset）和外部阴影。
例如：

box-shadow: 0px 1px 4px rgba(0,0,0,0.3),20px 40px 10px rgba(255,0,0,0.1) inset;
/*内部阴影20px是距离左端20px，显示在box上，当h-shadow和v-shadow同时为0时，box四边都有内部阴影*/

曲线阴影浏览器实现效果：

翘边阴影实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>photo shadow</title><style type="text/css">body{font-family: Arial;font-size: 20px;}body,ul{margin: 0;padding: 0;list-style: none;}.wrap h1{font-size: 40px;text-align: center;line-height: 200px;}.box{width: 980px;height: auto;clear: both;overflow: hidden;margin: 20px auto;}.box li{width: 300px;height: 210px;float: left;margin: 20px 10px;border: 2px solid #efefef;background: #fff;position: relative;box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;}.box li img{display: block;width: 290px;height: 200px;margin: 5px;}.box li:before{content: '';position: absolute;z-index: -2;width: 90%;height: 80%;left: 20px;bottom: 8px;background:transparent;box-shadow: 0 8px 20px rgba(0,0,0,0.6);transform: skew(-12deg) rotate(-4deg);}.box li:after{content: '';position: absolute;z-index: -2;width: 90%;height: 80%;right: 20px;bottom: 8px;background:transparent;box-shadow: 0 8px 20px rgba(0,0,0,0.6);transform: skew(12deg) rotate(4deg);}</style>
</head>
<body><div class="wrap effect"><h1>Shadow Effect</h1></div><ul class="box"><li><img src="D:\壁纸\新建文件夹\3-1F42FZ005.jpg"></li><li><img src="D:\壁纸\新建文件夹\dd7a2208731fd42_size331_w3200_h2000.jpg"></li><li><img src="D:\壁纸\新建文件夹\5939fa4c64497.jpg"></li></ul>
</body>
</html>

css实现图片翘边阴影相关推荐

【css】图片的内容阴影处理
这个是基本效果,阴影和图片内容有关. 其他图片的效果根据需求删减代码,这里我做了一个简单的动画效果. 外面的box是为了让动画更阴影同步. 如果用倒影会导致镜像的周围模糊被切割. 以下是代码: & ...
css给图片底部加阴影,使用CSS给图片添加阴影的方法
网页制作poluoluo文章简介:一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢?我们可以 ...
html中图片阴影怎么写,css怎么在图片上加阴影？
css怎么在图片上加阴影?下面本篇文章给大家介绍一下使用CSS在图片上加阴影的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:设置box-shadow属性 box-sh ...
CSS3实现图形曲线阴形和翘边阴影
首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡背景图片大小 background-size:宽度高度; 设置背景图片的大小取值场景数字+px ...
redius在php中的使用,HTML_使用css给图片添加阴影入门篇，一般我们可以使用背景图的方 - phpStudy...
使用css给图片添加阴影入门篇一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取"视觉欺骗大法"--定义渐变边框来实现 a href=& ...
css 一条线加阴影,CSS3实现曲线阴影和翘边阴影
html> CSS3实现曲线阴影和翘边阴影 /*源于imooc的学习*/ body { font-family: "微软雅黑", "Microsoft YaHei& ...
DIV+CSS布局图片加阴影效果方法
DIV+CSS布局图片加阴影效果方法转自:爱微网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

css实现图片翘边阴影

css阴影：

曲线阴影浏览器实现效果：

翘边阴影实现代码：

css实现图片翘边阴影相关推荐

最新文章

热门文章