使用css3 属性如何丰富图片样式(圆角 阴影 渐变)


Posted in HTML / CSS onNovember 22, 2012

在css3中,直接在图片上使用box-shadow 和 border-radius,浏览器并不能很好的渲染。但是如果把图片作为background-image,添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。
问题
通过查看demo能注意到,我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius,但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲染。

复制代码
代码如下:

.normal img {
border: solid 5px #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}

firefox效果
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
chrome/safari
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
变通方案
为了使border-radius 和 内嵌box-shadow能够正常工作,我们需要把图片转换成background-image的方式。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
动态方式
为了动态完成这一工作,我们需要借助jquery为每一个图片添加背景图片的包装。下面的js代码为每一个图片添加了一个span的包装,span的背景图片路径就是图片的路径。
代码比较简单,我想就没有讲解的必要了。不清楚了可以直接去查jquery的api。
复制代码
代码如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").load(function() {
$(this).wrap(function(){
return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>

输出
上面的代码会输出如下结果:
复制代码
代码如下:

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
<img src="image.jpg" style="opacity: 0;">
</span>

圆形图片
添加我们使用border-radius来实现圆形图片的效果,效果如下:
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.circle .image-wrap {
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
}

卡片风格
下面是卡片风格的图片,使用了多个内嵌box-shadow。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.card .image-wrap {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

浮雕风格
下面是浮雕效果。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.embossed .image-wrap {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

柔性浮雕风格
相对于浮雕样式,新样式添加了1px blur属性。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.soft-embossed .image-wrap {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

抠图风格
使用内嵌box-shadow就可以实现抠图效果。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.cut-out .image-wrap {
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

变形和发光
在这个例子中我们为图片包装添加transition属性,鼠标滑过的时候,他会从圆角变为圆形。然后我们使用多个box-shadow实现发光效果。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.morphing-glowing .image-wrap {
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.morphing-glowing .image-wrap:hover {
-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
-webkit-border-radius: 60em;
-moz-border-radius: 60em;
border-radius: 60em;
}

高光效果
高光的效果是通过为元素添加 :after 伪类实现的。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.glossy .image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.glossy .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 50%;
top: 0;
left: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

倒影效果
在这个例子中,我们将高光效果移到底部就实现倒影效果。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.reflection .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 30px;
bottom: -31px;
left: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
.reflection .image-wrap:hover {
position: relative;
top: -8px;
}

高光和倒影
本例我们使用:before 和 :after 将高光和倒影效果组合起来。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.glossy-reflection .image-wrap {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.glossy-reflection .image-wrap:before {
position: absolute;
content: ' ';
width: 100%;
height: 50%;
top: 0;
left: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
.glossy-reflection .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 30px;
bottom: -31px;
left: 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}

胶带风格
在这个例子中,我们使用:after来实现胶带的效果。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.tape .image-wrap {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
.tape .image-wrap:after {
position: absolute;
content: ' ';
width: 60px;
height: 25px;
top: -10px;
left: 50%;
margin-left: -30px;
border: solid 1px rgba(137,130,48,.2);
background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

变形和着色
在这个例子中,我们在元素上使用:after,当鼠标进过的时候实现径向渐变的效果。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
css:
复制代码
代码如下:

.morphing-tinting .image-wrap {
position: relative;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.morphing-tinting .image-wrap:hover {
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.morphing-tinting .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after {
background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}

羽化边缘圆形
我们同样可以使用径向渐变产生遮罩,实现羽化的效果。
使用css3 属性如何丰富图片样式(圆角 阴影 渐变) 
css:
复制代码
代码如下:

.feather .image-wrap {
position: relative;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
}
.feather .image-wrap:after {
position: absolute;
content: ' ';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}

浏览器兼容性
这种实现方式在大多数支持border-radius, box-shadow, :before and :after特性的浏览器中(例如Chrome, Firefox 和 Safari),都能很好的工作。在不支持新特性的浏览器中,只会显示原始图片。
创造你自己的实现
借助:before 和:after伪类能为图片创造很多种样式,你可以自己尝试创建出新的效果。
HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 #HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 #HTML / CSS
Bootstrap 学习分享
Nov 12 #HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 #HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 #HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 #HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 #HTML / CSS
You might like
PHP 实用代码收集
2010/01/22 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
python实现360皮肤按钮控件示例
2014/02/21 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
公共事业管理本科生求职信
2013/10/07 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
计划生育证明书写要求
2014/09/17 职场文书
检察院起诉书
2015/05/20 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
Vue实现下拉加载更多
2021/05/09 Vue.js
详解MySQL 联合查询优化机制
2021/05/10 MySQL
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers