zoukankan      html  css  js  c++  java
  • CSS3之box-shadow

    1、属性简介

         box-shadow:颜色值|inset|none|!important

         

    2、浏览器兼容性

    (1)IE不兼容,IE9和IE10未知;

    (2)火狐3.5(包含3.5)以上兼容

    (3)Chrome 2.0.x 兼容

    (4)Opera不兼容


    3、属性实例

    <!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=utf-8" />
    <title>CSS3之box-shadow</title>
    <style type="text/css">
       body{
    	   animation-name:!important;
    	   animation-play-state:running;
    	   100%;
    	   height:100%;
    	   font-size:14px;
    	   font-variant:normal;
       }
       #divStyle{
    	   60%;
    	   height:200px;
    	   background-color:#CFC;
    	   font-size-adjust:inherit;
    	   box-shadow:inset;
    	   box-shadow:none;
    	   box-shadow:!important;
    	   
    	   -moz-box-shadow:#C00;
    	   -webkit-border-shadow:#306;
       }
       .tab{
    	   background-color:#FF9;
    	   text-align:center;
    	   100%;
    	   height:100%;
       }
    	   
    </style>
    </head>
    
    <body>
      <div id="divStyle">
         <table class="tab" cellpadding="1" cellspacing="1" border="1">
             <tr>
               <th rowspan="3"></th>
               <th colspan="3"></th>
               <th colspan="2" rowspan="2"></th>
               <th colspan="2" rowspan="2"></th>
             </tr>
             <tr>
               <th rowspan="2"></th>
               <th rowspan="2"></th>
               <th rowspan="2"></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
             <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
             </tr>
         </table>
      </div>
    </body>
    </html>
    

    4、运行结果


  • 相关阅读:
    excel表中的一列,如何去除重复项
    Notepad++ 列操作
    mysql 登陆其它服务器
    贪心算法处理背包问题
    分治法处理排序问题
    回溯法_皇后问题
    动态规划算法的java实现
    人事管理系统
    java复习笔记
    核心动画-翻页效果的实现
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315373.html
Copyright © 2011-2022 走看看