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;
	   width:100%;
	   height:100%;
	   font-size:14px;
	   font-variant:normal;
   }
   #divStyle{
	   width: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;
	   width: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、运行结果

CSS3之box-shadow的更多相关文章

  1. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  2. 转: css3: display:box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  3. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  4. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  5. css3 display:box

    想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...

  6. css3 display:box 属性

    先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...

  7. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  8. Sublime Text自定制代码片段(Code Snippets)

    在编写代码的整个过程中,开发人员经常会一次又一次的改写或者重用相同的代码段,消除这种重复过程的方法之一是把我们经常用到的代码保存成代码片段(snippets),这使得我们可以方便的检索和使用它们. 为 ...

  9. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  10. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

随机推荐

  1. Python selenium 一个节点两个关联input

    HTML代码: 一个节点两个关联input  多出现于密码框 先需要模拟点击进入第一个input,才能激活第二个input. 代码: driver.find_element_by_name('Text ...

  2. 使用mybatis从mysql里进行模糊查询的编码问题

    关于这个问题,记录下我的解决方法,希望对有同样困惑的朋友,有所帮助. 问题描述: 我在做mybatis从mysql里模糊查询时,如果模糊的关键词是字母的话,可以查出来.如果模糊的关键词是汉字的话,查不 ...

  3. java之过滤器Filter

    Java三大器之过滤器(Filter)的工作原理和代码演示   一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术之一,WEB开发人员通过Filter技术,对w ...

  4. Zookeeper启动时报8080端口被占用

    zookeeper启动时报8080 端口被占用,导致启动失败.特别是服务器上部署了tomcat服务时需要注意. 通过查看zookeeper的官方文档,发现有3种解决途径: (1)删除jetty. (2 ...

  5. Hadoop学习笔记三

    一.设置HDFS不进行权限检查 默认的HDFS上的文件类似于Linux中的文件,是有权限的.例如test用户创建的文件,root用户如果没有写权限,则不能进行删除. 有2种办法进行修改,修改文件的权限 ...

  6. BZOJ 3551: [ONTAK2010]Peaks加强版 [Kruskal重构树 dfs序 主席树]

    3551: [ONTAK2010]Peaks加强版 题意:带权图,多组询问与一个点通过边权\(\le lim\)的边连通的点中点权k大值,强制在线 PoPoQQQ大爷题解传送门 说一下感受: 容易发现 ...

  7. xcode7中使用cocos2d-x3.8的webview控件

    在XCode7中使用cocos2d-x 3.3以上版本的WebView控件时,碰到了编译错误 App Transport Security has blocked a cleartext HTTP ( ...

  8. MySQL的字符编码设置

    -- 创建数据库时,设置数据库的编码方式 -- CHARACTER SET:指定数据库采用的字符集,utf8不能写成utf-8-- COLLATE:指定数据库字符集的排序规则,utf8的默认排序规则为 ...

  9. mysql有多条记录的单个字段想存为一个字段显示的方法

    SELECT po.id,(SELECT GROUP_CONCAT(mr.member_type) as memberTypeList FROM prod_offer_member_rel mr WH ...

  10. Java经典编程题50道之三十二

    取一个整数a从右端开始的4-7位. public class Example32 {    public static void main(String[] args) {        cut(12 ...