现在的位置: 首页 > 综合 > 正文

纯CSS无图实现DIV边框平滑阴影

2017年11月26日 ⁄ 综合 ⁄ 共 2593字 ⁄ 字号小中大 ⁄ 评论关闭

<ul style="margin: 0px; padding: 5px; list-style: none; font-family: Verdana, Tahoma; line-height: 22px;"><li class="intro_p" style="margin: 0px; padding: 0px; text-indent: 28px; font-size: 10.5pt; line-height: 23px;">纯CSS无图实现DIV边框平滑阴影
</li><li class="intro_p" style="margin: 0px; padding: 0px; text-indent: 28px; font-size: 10.5pt; line-height: 23px;">纯CSS无图实现DIV边框平滑阴影，利用1像素的原理而制作的阴影效果，让每个嵌套的DIV CLASS元素向外延伸一像素，颜色递减，这样就实现了阴影效果，而且效果不错。</li></ul><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS边框阴影</title>
<style type="text/css">
div {border-width: 1px; border-style: solid; padding: 1px;padding:1px;}
.a {background-color: #F3F3F3; border-color: #FBFBFB;}
.b {background-color: #D8D8D8; border-color: #E8E8E8;}
.c {background-color: #FFF; border-color: #BBB; height: 100px;color：#ff0000;}
</style>
</head>
<body>
<div class="a">
  <div class="b">
    <div class="c">2010年上海世博会合作伙伴。</div>
  </div>
</div>
</body>
</html>

css实现div框阴影

css代码：
<style type="text/css">
. mydiv{
width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}
</style>

for ie: 
direction 阴影角度 0°为从下往上 顺时针方向
strength 阴影段长度


-moz-box-shadow: 2px 2px 10px #909090;
-webkit-box-shadow: 2px 2px 10px #909090;
box-shadow:2px 2px 10px #909090;

第一个参数是x轴阴影段长度
第二个参数是y轴阴影段 长度
第三个参数是往四周阴影段 长度
第四个参数是阴影段颜色 

div代码： 
<div class="mydiv">
    123123213123
</div>

HTML CSS边框阴影的实现

一款用CSS控制背景图像平铺，从而实现区域边框阴影的效果，虽然用到了图片，但可贵之处是本代码不管你需要阴影的区域是多大，它都能自动适应，因些还是很值得收藏一下的，兼容所有的IE浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS边框阴影</title>
<style>
.dropshadow2{
    float:left;
    clear:left;
    background: url(/jscss/demoimg/200903/shadowAlpha.png) no-repeat bottom right !important;
    background: url(/jscss/demoimg/200903/shadow.gif) no-repeat bottom right;
    margin: 10px 0 10px 10px !important;
    margin: 10px 0 10px 5px;
    width: 360px;
    padding: 0px;
}
.innerbox{
    position:relative;
    bottom:6px;
    right: 6px;
    border: 1px solid #999999;
    padding:4px;
    margin: 0px 0px 0px 0px;
}
.innerbox{
    /* IE5 hack */
    margin: 0px 0px -3px 0px;
    margin:  0px 0px 0px 0px;
}
.innerbox p{        
    font-size:14px;
    margin: 3px;
}
</style>
</head>
<body>
<div class="dropshadow2"><div class="innerbox"><h4>CSS阴影：</h4>  <p>这段边框阴影效果怎么样呢？</p></div></div>
</body>
</html>