一般我们通过box-shadow来设置盒阴影,但是有些属性我们一般没有用到,这篇文章将对box-shadow属性进行逐个分析。
语法

CSS Code复制内容到剪贴板
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

  

即:

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

inset 投影方式
    此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”, 其投影就是内阴影;
    x-offset
    水平方向的偏移量;
    y-offset
    垂直方向的偏移量;
    blur-radius模糊半径
    可选,只能为整数,值越大阴影就越模糊;
    spead-radius扩展半径
    可选,可以为正数或者负数,如果为负数,整个阴影将会缩小;
    color阴影颜色
    可选,如果不设定值,浏览器将会采用其默认色,默认色一般是黑色。

一般我们很少用到inset和spead-radius这两个属性,如果运用好这两个属性可以制作出非常酷炫的效果。

CSS3中box-shadow的用法介绍的更多相关文章

  1. css3中font-face属性的用法详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  2. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  3. html5+css3中的background: -moz-linear-gradient 用法

    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...

  4. html5+css3中的background: -moz-linear-gradient 用法 (转载)

    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...

  5. SqlHelper中SqlHelperParameterCache类的用法介绍

    SqlHelper类中提供了三种可以用来管理SqlParameter参数的共享方法.下面来一一讲解: 1.CacheParameterSet 将SqlParameter参数数组存储到本地缓存中 2.G ...

  6. Java中的Enum(枚举)用法介绍

    1. 关于Java Enum:学过C/C++等语言的人,应该都对Enum类型略知一二.Enum一般用来表示一组相同类型的常量.如性别.日期.月份.颜色等.对这些属性用常量的好处是显而易见的,不仅可以保 ...

  7. SVN中tag branch trunk用法详解

    SVN中tag branch trunk用法详解 2010-05-24 18:32 佚名 字号:T | T 本文向大家简单介绍一下SVN中tag branch trunk用法,SVN中tag bran ...

  8. 不可不看!CSS3中三十一种选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  9. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  10. Spring Data JPA系列3:JPA项目中核心场景与进阶用法介绍

    大家好,又见面了. 到这里呢,已经是本SpringData JPA系列文档的第三篇了,先来回顾下前面两篇: 在第1篇<Spring Data JPA系列1:JDBC.ORM.JPA.Spring ...

随机推荐

  1. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  2. Resources are low on NN. Please add or free up more resources then turn off safe mode manually.

    提交spark应用到yarn集群上的时候在跑一段时间就会出现这个报错: 根据上面的报错原因分析是因为集群资源不够,集群的自我保护机制使hdfs处于安全模式,然后我用"hdfs dfsadmi ...

  3. C++ 里 构建动态二维数组

    //****动态二维数组 /* int m=3; int **data; int n=2; data=new int*[m]; for(int j=0;j<m;j++) { data[j]=ne ...

  4. 获取月份对应的day

    function getDaysInMonth(month, year) { , , , , , , , , , , , ]; //主要处理二月份的天数 ) && (year % == ...

  5. NuGet 的使用

     install-package entityframework//Enable-Migrations -ContextTypeName College.Models.CollegeEntities  ...

  6. 第六节:宿主如何使用AppDomain

    前面已经讨论了宿主以及宿主加载CLR的方式.同时还讨论了宿主如何告诉CLR创建和卸载AppDomain.为了使这些讨论更加具体,下面将描述一些常见的宿主和AppDomain使用情形.特别地,我要解释不 ...

  7. MTK机子修复分区信息

    这是前一个星期的事了,最近一直懒得写博客~ 此事是由于我误刷了内核,然后导致分区信息出错... 内置存储挂载不上,也找不到内置存储的分区! 如果不是star的帮助.估计俺的爪机就要返厂了!! 接下来说 ...

  8. 《Prism 5.0源码走读》ModuleCatalog

    概念 ModuleCatalog 是Prism中主要概念之一,主要用来保存应用程序可用的modules(模块),每个module都是用ModuleInfo来定义(包含module的名称.类型和位置). ...

  9. Python pexpect出现错误‘module have no attribute "spawn" 解决办法

    今天我遇到了这个错误,现在将错误总结如下: 1.首先查询一下自己的操作系统,pexpect中的spawn()和run()仅仅运行在POSIX系统上,在WINDOWS下是没有这两个东西的,在官网http ...

  10. 部署git server

    http://gogs.io/docs/installation/install_from_binary.htmlwget http://gogs.dn.qbox.me/gogs_v0.6.5_lin ...