DIV阴影效果

一、第一种类型

 

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>CSs阴影框,Div阴影</title>

<style type="text/css">

*{ margin:0; padding:0; border:0; }

body{ padding:4em; font-family:Tahoma, Geneva, sans-serif }

/*box*/

.box { width:60%;background-color:#E4E4E4}

.box p {line-height:1.8; padding:2em; position:relative; top:-5px; left:-5px;zoom:1;background-color:#ccc}

</style>

</head>

<body>

<div class="box">

<p>源码爱好者提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等,做有质量的学习型源码下载站。</p>

</div>

</body>

</html>

 

二、第二种类型

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>

三、第三种类型

CSS:

 

<style type="text/css">

 

/* 为 DIV 加阴影 */

.out {

    position:relative;

    background:#bbb; 

    margin:10px auto;

    width:240px;

}

.in {

    background:#fff; 

    border:1px solid #555;

    padding:10px 5px;

    position:relative; 

    top:-5px;

    left:-5px;

}

 

/* 为 图片 加阴影 */

.imgShadow {

    position:relative;

    background:#bbb; 

    margin:10px auto;

    width:220px;

}

.imgContainer {

    position:relative; 

    top:-5px;

    left:-5px;

    background:#fff; 

    border:1px solid #555;

    padding:0;

}

.imgContainer img {

    display:block;

}

 

</style>

 

 

 

 

HTML:

 

<h4>为 DIV 加阴影:</h4>

<div class="out">

    <div class="in" >

        <img src=\'#\'" //www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />

    </div>

</div>

 

<h4>为 图片 加阴影:</h4>

<div class="imgShadow">

    <div class="imgContainer" >

        <img src=\'#\'" //www.codebit.cn/admin/tpl/default/img/logo.gif" alt="" />

    </div>

</div>

你可能感兴趣的:(css)