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

Posted 2023-04-06

参考技术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)。\\x0d\\x0a直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\\x0d\\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。

如何用css，js实现如图效果

div边框是怎么去除一部分的..

左右2个div

position:absolute;

左边保留上下左3个边，右侧保留上下左右4个边

左面z-index大于右边，让左面div压过右面div，压过的宽度正好是边框宽即可，简单示例

.left
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100px;
    border:1px solid #CCC;
    border-right:none;
    z-index:2;

.right
    position:absolute;
    left:100px;
    top:0;
    width:200px;
    height:150px;
    border:1px solid #CCC;
    z-index:1;
<div style="position:relative">
    <div class="left"></div>
    <div class="right"></div>
</div>追问

没有效果....

追答.left
    background:#FFF;

left加上背景色就行了

参考技术A 可也分别设置border-top border-right border-left border-bottom四个个属性，从而控制每一边的显示情况。