码迷,mamicode.com
首页 > Web开发 > 详细

Css3 文字阴影和盒子阴影

时间:2014-05-21 17:38:35      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   c   code   java   

文字阴影text-shadow的使用方法

text-shadow: length  length  length  color;

前三个length分别表示 阴影离开文字的横方向距离(也就是X轴方向),阴影离开文字纵方向的距离 (即Y轴方向),阴影的模糊半径,color是指阴影的颜色

bubuko.com,布布扣
<div>专注前端</div>
bubuko.com,布布扣
bubuko.com,布布扣
bubuko.com,布布扣
div{ font-size: 40px;  text-shadow: 5px 5px 0 grey;}
bubuko.com,布布扣
bubuko.com,布布扣

专注前端

bubuko.com,布布扣
span{ font-size: 40px;  text-shadow: -15px -15px 0 grey; border: 1px solid #ffaa00;     box-shadow: 5px 5px 2px #CCCCCC;}
bubuko.com,布布扣

 专注前端

多个阴影

bubuko.com,布布扣
div{ font-size: 40px;  
    text-shadow: 35px 25px 2px grey,  
                 55px 35px 2px grey,
                 75px 45px 0px grey; }
bubuko.com,布布扣

专注前端

 

 

 

box-shadow: length  length  length  color;

前三个length分别表示 阴影离开文字的横方向距离(也就是X轴方向),阴影离开文字纵方向的距离 (即Y轴方向),阴影的模糊半径,color是指阴影的颜色

和文字阴影一样

 

bubuko.com,布布扣
table{ font-size: 30px;  
                   border-spacing: 10px;
                  -webkit-box-shadow: 5px 5px 20px gray;
                  -moz-box-shadow: 5px 5px 20px gray;}
            td{
                background: #ffaa00;
                -webkit-box-shadow: 5px 5px 5px gray;
                -moz-box-shadow: 5px 5px 5px gray;
                padding: 10px;}
bubuko.com,布布扣
bubuko.com,布布扣
<table>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
            </tr>
            <tr>
                <td>I</td>
                <td>J</td>
                <td>K</td>
                <td>L</td>
            </tr>
        </table>
bubuko.com,布布扣

 

A B C D
E F G H
I J K L

 

bubuko.com,布布扣

 

Css3 文字阴影和盒子阴影,布布扣,bubuko.com

Css3 文字阴影和盒子阴影

标签:style   blog   class   c   code   java   

原文地址:http://www.cnblogs.com/zongbojue/p/3740398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!