CSS3阴影效果

Posted 2023-04-05

如何实现一个div的顶部有阴影，其他左右 下都没有？求高手解答。

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。
基本语法是box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor
对象选择器 box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色
box-shadow属性的参数设置取值：
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。 参考技术A div-webkit-box-shadow:0px -2px 5px #000;
-moz-box-shadow:0px -2px 5px #000;
box-shadow:0px -2px 5px #000;padding:4px 10px;
behavior: url(PIE/pie.htc)
box-shadow：apx bpx cpx #；
b是上下阴影，正就是下边框有阴影，负就是上边框有阴影；a是左右阴影，正代表右阴影，负代表左阴影；#后代表阴影颜色；behavior是专门针对IE浏览器的，现在的IE浏览器还不支持此属性。追问

那个我要的是上边框有阴影而且是内阴影，其他都没有，你这效果不是我要的啊，你能不能帮忙改下啊？

追答

div-webkit-box-shadow:0px 2px 5px #000 inset;
-moz-box-shadow:0px 2px 5px #000 inset;
box-shadow:0px 2px 5px #000 inset;
padding:4px 10px;
behavior: url(pie.htc)
inset表示内阴影。不知道是你要的那种效果吗。

参考技术B 就 ws臭小子 的代码, 后面加inset
-webkit-box-shadow:0px -2px 5px #000 inset;
-moz-box-shadow:0px -2px 5px #000 inset;
box-shadow:0px -2px 5px #000 inset;追问

效果还是不行。

追答

-webkit-box-shadow-top:0px 2px 1px #000 inset;
-moz-box-shadow-top:0px 2px 1px #000 inset;
box-shadow-top:0px 2px 1px #000 inset;
重新修改了一下, 很接近你的要求的, 但是不可能做到左右两边完全没有
如果想达到你的效果,需要一些变通的方法
1. 制作阴影的背景图片 这个做前台设计的人应该都会
2. 在当前这个div里加一个span, span的CSS为
width:100%;height:1px; display:block;box-shadow-top:0px 0px 5px #000;position:absolute;top:-1px;
这个div需要加的CSS为
position:relative; overflow:hidden;

所有支持CSS3的浏览器通过测试

如何用CSS实现DIV块的阴影效果

我用filter：dropshadow（）这个不行啊，是什么回事，我用的是dreamwearer8和IE6

可以用CSS3. 不过要支持IE6的话，加载个 .htc 行为文件就好了。 什么圆角，什么阴影。全都小ks， 要的话可以M我。我写给你。 

border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

-webkit-box-shadow: #666 0px 0px 10px;

-moz-box-shadow: #666 0px 0px 10px;

box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc);

参考技术A 可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-box-shadow: #666 0px 0px 10px;-moz-box-shadow: #666 0px 0px 10px;box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc)。
直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。
这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。<title>盒子阴影的CSS实现方法</title> 参考技术B border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;background: #EEFF99;behavior: url(/PIE.htc);
这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。
<title>盒子阴影的CSS实现方法</title>
<style>
.baseBlock
width:220px;
position:relative;

.baseBlockIn
padding:10px 15px;
background:#a0b3d6;
box-shadow:10px 10px 5px #444;
-moz-box-shadow:10px 10px 5px #444;
-webkit-box-shadow:10px 10px 5px #444;
position:relative;
z-index:1;

.ieShadow
_width:215px;
_height:160px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=6);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=6)";
background-color:#444\9;
position:absolute;
left:5px;
top:5px;
right:-5px;
bottom:-5px;

</style>
<div class="baseBlock">
<div class="baseBlockIn"> 参考技术C 阴影效果如果不用过滤器的话，那就是用图片做出来的 参考技术D 我也想知道。