-webkit-box-shadow:2px -2px 10px #06c;

给元素添加阴影效果

text-shadow 是给文本添加阴影效果属性同上

形成的阴影跟阴影本体大小一致,四个属性分别代表

2px 距离目标左侧的偏移量

-2px距离目标上方的偏移量

(负数表示向反方向投射阴影)

10px代表阴影的发散模糊效果

最后一项是阴影颜色

CSS3 -web-box-shadow实现阴影效果的更多相关文章

  1. css3 web字体记

    css3 web字体 @font-face语法 @font-face能够加载服务器端的字体,让客户端浏览器显示客户端没有安装的字体. @font-face{ font-family:<YourW ...

  2. CSS3 Flex Box（弹性盒子）

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

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

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

  4. 转: css3: display:box详解

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

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

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

  6. css3 display:box

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

  7. css3 display:box 属性

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

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

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

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

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

  10. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

随机推荐

  1. jupyter notebook + pyspark 环境搭建

    安装并启动jupyter 安装 Anaconda 后, 再安装 jupyter pip install jupyter 设置环境 ipython --ipython-dir= # override t ...

  2. Windows Server 2008 R2 IIS7.5下PHP、MySQL快速环境配置【图】

    众所周知,win平台的服务器版本默认是不能运行php的,需要对服务器进行环境配置. 而许多朋友纠结如何配置,在百度上搜索出的教程一大堆,基本步骤复杂,新手配置容易出错. 今天,邹颖峥教大家一种快速配置 ...

  3. hadoop2.7.1安装

    Hadoop2.7.1安装与配置 http://www.oschina.net/question/117352_247251 http://www.cnblogs.com/wayne1017/arch ...

  4. HDOJ 3652 B-number

    B-number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  5. Android 全屏显示

    Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

  6. 第2月第1天 命令（Command）模式

    http://www.tracefact.net/Design-Pattern/Command.aspx 命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请 ...

  7. 使用Carthage安装第三方Swift库

    http://blog.crazyphper.com/?p=3661 carthage update

  8. W3Cschool菜鸟教程离线版下载链接

    请在电脑上打开以下链接进行下载w3cschool 离线版(chm):http://pan.baidu.com/s/1bniwRCV(最新,2014年10月21日更新)w3cschool 离线版(htm ...

  9. canvas对象arcTo函数的使用-遁地龙卷风

    (-1)环境说明 我使用的浏览器是chrome49 (1)详细介绍 $(function() { var context = lol.getContext("2d"); conte ...

  10. mac os 基本命令

    unix 系统命令行 ,仅供参考   目录操作   命令名 功能描述 使用举例   mkdir 创建一个目录 mkdir dirname   rmdir 删除一个目录 rmdir dirname   ...