-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. [译]JavaScript:将字符串两边的双引号转换成单引号

    原文:http://ariya.ofilabs.com/2012/02/from-double-quotes-to-single-quotes.html 代码的不一致性总是让人发狂,如果每位开发者都能 ...

  2. autopep8

    修正python pep8的警告挺无趣的, 用了 autopep8 感觉比较爽. 记录如下. ----------------pep8检查----------------平时我用pydev做pep8检 ...

  3. 7个Linux和Ubuntu下的免费CSS编辑器

    一个好的编辑器是世界上所有程序员和web开发人员梦寐以求的东西.代码编辑器和集成开发环境是程序员工作时的左膀右臂.还在纠结使用什么编辑器么?下面我们将推荐7个主要用于Linux操作系统的免费CSS代码 ...

  4. Todd's Matlab讲义第3讲：牛顿法和for循环

    方程数值求解 下面几讲,我们将聚集如下方程的解法: \begin{equation} f(x)=0 \tag{3.1}\label{3.1} \end{equation} 在微积分课程中,我们知道,许 ...

  5. 浏览器兼容性之JavaScript篇

    近期公司职务变动,我大部分工作时间都在做web前端开发.工作性质主要是跟javascript和css(层叠样式表)打交道,而JavaScript兼容性一直是Web开发者的心病,当然我也不例外,虽然我大 ...

  6. Android手机如何通过USB共享网络给Mac？

    最近网络挂了,mac不能上网查资料,心情非常毛躁,急切寻求用mac蹭WiFi的方法. 没有找到电脑端破解WiFi密码的软件,手头的Android手机没有root,也无法查看WiFi密码--->破 ...

  7. canvas对象arc函数的使用-遁地龙卷风

    (-1)写在前面 我用的是chrome49 <canvas id="lol" height="300"></canvas> (1)详细介 ...

  8. Android SDK Manager 无法下载更新，或者更新速度超慢，或者待安装包列表不显示

    解决方法: 转自 http://www.cnblogs.com/tc310/archive/2012/12/21/2828450.html http://jingyan.baidu.com/artic ...

  9. iOS开发——高级篇——地理定位 CoreLocation

    一.CoreLocation 在移动互联网时代,移动app能解决用户的很多生活琐事,比如周边:找餐馆.找KTV.找电影院等等导航:根据用户设定的起点和终点,进行路线规划,并指引用户如何到达 在上述应用 ...

  10. 我所理解的cocos2dx自适配屏幕大小方案

    这里主要有两个点: 1.屏幕大小的设置,也就是手机窗口的大小,在各个手机上面或者平板上的屏幕的大小. 这个大小的设置就是代码里面的:glview->setFrameSize(width, hig ...