本文作者:DurkBlue

博主谈谈使用css3盒子阴影box-shadow中的感受

DurkBlue 2019-11-29 1748 抢沙发
博主谈谈使用css3盒子阴影box-shadow中的感受摘要: 原来这个属性的值和参数跟text-shadow是一个样的,就是都是水平偏移(可取正负值)、垂直偏移(同上)、阴影模糊值、阴影颜色。当然使用text-shadow时是不需要区分浏览器...

原来这个属性的值和参数跟text-shadow是一个样的,就是都是水平偏移(可取正负值)、垂直偏移(同上)、阴影模糊值、阴影颜色。

当然使用text-shadow时是不需要区分浏览器的。另外我还发现网络有一个是可以在前面添加inset(内发光或者阴影)。类似于这样子写·

box-shadow:inset 2px 2px 2px #FF0000;

颜色值还可以是这样子的rgba(0,0,0,5)

 博主谈谈使用css3盒子阴影box-shadow中的感受  第1张

box-shadow<length> <length> <length> <length> || <color>

相关属性:text-shadow

取值:
  • <length> <length> <length>? <length>? || <color>

  • 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色

说明:

设置块阴影

引擎类型GeckoWebkitPresto
box-shadow-moz-box-shadow-webkit-box-shadow




兼容性:
类型博主谈谈使用css3盒子阴影box-shadow中的感受  第2张Internet Explorer博主谈谈使用css3盒子阴影box-shadow中的感受  第3张Firefox博主谈谈使用css3盒子阴影box-shadow中的感受  第4张Chrome博主谈谈使用css3盒子阴影box-shadow中的感受  第5张Opera博主谈谈使用css3盒子阴影box-shadow中的感受  第6张Safari
版本(×)IE6(×)Firefox 3.0.10(√)Chrome 2.0.x(×)Opera 9.64(√)Safari 4
(×)IE7(√)Firefox 3.5
(√)Opera 10.6
(×)IE8



(√)IE9



代码与实例

CSS代码:
.box_shadow{
    width:180px; 
    padding:40px 20px; 
    background:white; 
    -webkit-box-shadow:4px 2px 6px #333333; 
    -moz-box-shadow:3px 2px 6px #333333;
}
HTML代码:
//code from http://caibaojian.com/box-shadow.html
<div class="box_shadow">盒阴影效果,看看如何~~</div>
效果截图

博主谈谈使用css3盒子阴影box-shadow中的感受  第1张

拓展知识点(由各前端同仁提供)

知识点(1) 提供者:张鑫旭 [编辑本段]
css3盒阴影效果不支持图片中空透明背景边缘的阴影效果见如下测试代码:img{-moz-box-shadow:2px 2px 4px #333333; -webkit-box-shadow:2px 2px 4px #333333; box-shadow:2px 2px 4px #333333; background:-moz-linear-gradient(top, white, #beceeb); background:-webkit-gradient(linear,0 0, 0 bottom, from(white), to(#beceeb));}<img src="../image/zxx_cavity.png" />结果中空的“张鑫旭”三个字的边缘却没有阴影,只有图片的边缘有。您可以狠狠地点击这里查看demo:http://www.zhangxinxu.com/study/201004/png-cavity-box-shadow-test.html
知识点(2) 提供者:张鑫旭 [编辑本段]

CSS3盒阴影效果不仅支持盒外阴影,还支持内阴影,使用时增加一个inset属性即可。例如:box-shadow: inset 0 0 1px #fff;所表示的含义是没有偏移,1像素模糊的白色内阴影。box- shadow还支持多阴影,例如:box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33), inset -2px -2px 10px rgba(255,255,255,0.25);所表示的含义是,无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素,模糊10像素,透明度0.25的白色内阴影。box-shadow的投影功能很强大,配合其他一些CSS3属性,能够轻松实现很多精湛的UI效果,例如下面的样式: -webkit-border-radius: 40px; -webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000; -moz-border-radius: 40px; -moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df; height: 34px; width: 80px; border-radius: 40px; background: #034a76; box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255,255,255,0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;能够实现下图所示的按钮效果:博主谈谈使用css3盒子阴影box-shadow中的感受  第8张

 

发现在使用:after之后还有这样子的效果,来自网络

看下面一个例子:为下面这张图片添加阴影,让其有立体感:

博主谈谈使用css3盒子阴影box-shadow中的感受  第9张


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
body {
width:500px;
margin:50px auto;
}
.box {
position:relative;
-webkit-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow:1px 2px 4px rgba(0, 0, 0, 0.5);
padding:10px;
background:#fff;
}
.box img {
width:100%;
border:1px solid #8a4419;
border-style:inset;
}
.box:after {
content:'';
position:absolute;
z-index:-1;/* 阴影部分 */
-webkit-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 20px rgba(0, 0, 0, 0.3);


width:70%;
left:15%;
height:100px;
bottom:0;
}
</style>
</head>
<body>
<div class="box">
<img src="allstar.jpg" title="球星云集" />
</div>
</body>
</html>


运行效果如下(Chrome中):

博主谈谈使用css3盒子阴影box-shadow中的感受  第10张

以前我吗需要在photoshop中把图片做成这样的效果,现在可以直接用CSS代码来实现了。


此篇文章由DurkBlue发布,撰文不易,转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-11-29
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,1748人围观)参与讨论

还没有评论,来说两句吧...