用css体现文字的凹凸（浮雕）效果

用css体现文字的凹凸（浮雕）效果

要做出这个效果，首先必须知道css的一个属性：

• text-shadow:水平位置 垂直距离 模糊距离 阴影颜色;

• 水平位置和垂直位置的值可以为负值

• 可以使用两组值来实现凹凸效果，中间用逗号“,”隔开

    <style>
     body {
        background: #ccc;      /*设置整体的背景颜色为灰色*/
     }
     div {
        font-size: 80px;      /*设置字体的大小*/
        color: #ccc;          /*设置字体的颜色为灰色*/
     }
     div:first-child {        /*表示选择父元素的第一个子元素*/
        text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
     }
     div:last-child {         /*表示选择父元素的最后一个子元素*/
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
     }
     </style>
   
    ---------------------------------------------------------------
  
    <div>我是凸起的文字</div>
    <div>我是凹下去的文字</div>
  

  效果展示：

  
  image