-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. PHP中的Memcache详解

    一.Memcache简介 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力.它可以应 ...

  2. solrcloud

    @Test public void querySolrCloud(){ String zkHost = "127.0.0.1:2181"; String defaultCollec ...

  3. PHP跳转页面的几种实现方法详解

    •PHP页面跳转一.header()函数header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器.header() ...

  4. HDU HDU1558 Segment set（并查集+判断线段相交）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1558 解题报告:首先如果两条线段有交点的话,这两条线段在一个集合内,如果a跟b在一个集合内,b跟c在一 ...

  5. BZOJ1212——L语言

    题目大意:每一个字符串都可以分解成一些个单词组成,现在给你一些单词,再给你一个字符串, dp吧,设f[i]为从0开始,到i结束的字符串前缀是否可以被分解,因为单词长度很小,所以,这就T了, (什么逻辑 ...

  6. 小技巧-a标签去除蓝圈

    可以看到,蓝色的边框破坏了页面的整体美感,很多时候我们都是不需要的.通过设置相应的css可以去除点击过后的蓝色边框. map area { outline: none; } 效果如图,点击过后厌人的蓝 ...

  7. ionic隐藏tabs方法

    <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </io ...

  8. PYTHON 迭代器

    可以走直接作用于for循环的对象统称为可迭代对象使用:Iterable 使用isinstance()判断一个对象是否是Iterable对象: from collections import Itera ...

  9. PYTHON 文件操作

    对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 Beautiful is better than ugly. 优美胜于丑陋 Explicit i ...

  10. (转)Singleton 单例模式（懒汉方式和饿汉方式）

    原文地址:http://www.cnblogs.com/kkgreen/archive/2011/09/05/2166868.html 单例模式的概念: 单例模式的意思就是只有一个实例.单例模式确保某 ...