1.box-shadow是向盒子添加阴影。支持添加一个或者多个。

2.box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

3.注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

4.如果添加多个阴影,只需用逗号隔开即可。

.box_shadow{
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

5.阴影模糊半径与阴影扩展半径的区别

  阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

  阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

												

CSS3---box-shadow设置的更多相关文章

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

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

  2. css3 box

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

  3. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  4. 【转】CSS3的REM设置字体大小

    rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...

  5. CSS3的REM设置字体大小

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  6. css3 Box model 与 Box-sizing

    1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...

  7. 【CSS3】自定义设置可编辑元素闪烁光标的颜色

    前言 因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不同, 这样的问题肯定在书本上很难找到解决办法, 需要通过平时的基础积累和经验. 解决方案 使用 ::first-line 伪元素 ...

  8. CSS3 transform原点设置

    以左上角为原点 -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; 以右上角给原点 - ...

  9. css3 文字的设置

    1.text-shadow 有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选) .text11{text-shadow: 3px 3px 5px #f00 ;col ...

  10. 利用css3给座右铭设置漂亮的渐变色

    .footer-container .footer-content p .motto { font-weight: bolder; -webkit-background-clip: text; -we ...

随机推荐

  1. P4141 消失之物(背包)

    传送门 太珂怕了……为什么还有大佬用FFT和分治的…… 首先如果没有不取的限制的话就是一个裸的背包 然后我们考虑一下,正常的转移的话代码是下面这个样子的 ;i<=n;++i) for(int j ...

  2. EOS:dfuse stream 保证不会错过一个心跳

    强大的 dfuse history API 给我们带来了高效的链数据获取途径,让我们的 dapp 在用户体验上了一个台阶. 官方示例 不会错过一个心跳 代码分析 函数 pendingActions 待 ...

  3. jQuery笔记之工具方法

    jQuery 工具方法 $.type()判断数据类型 $.isArray() $.isFunction() $.isWindow()... $.trim()消除空格 $.proxy()改变this指向 ...

  4. 搜狗输入法ubuntu

    1.下载搜狗输入法的安装包 下载地址为:http://pinyin.sogou.com/linux/ ,如下图,要选择与自己系统位数一致的安装包,我的系统是64位,所以我下载64位的安装包 2.按键C ...

  5. mysql学习之通过文件创建数据库以及添加数据

    转自:http://blog.163.com/wujicaiguai@126/blog/static/170171558201411311547655/ 1.# 创建数据库语句 create data ...

  6. Hadoop工作流概念学习系列总述(一)

    不多说,这里,直接上干货!从这篇博客起,逐步分享如下: 1.工作流 2.Hadoop工作流(内置) 3.第三方框架--Azkaban(推荐外安装)

  7. js修改物理返回键功能

    preventBack: function(theurl){ var pushState = window.history.pushState; //点击物理返回键时,退出到跳转定义首页 if(pus ...

  8. 外文翻译 《How we decide》多巴胺的预言 第二节

    本节阅读感言:一朝被蛇咬,十年怕井绳.我们的大脑时刻跟新着本体的预测机制. 上一节提到的喇叭,苹果汁实验可以不断的延伸扩展,在播放喇叭前用强光照射...强光照射前放置特定的图片...都可以扩展多巴胺相 ...

  9. 11.1Java-接口

    一.接口 interface定义:固定格式 public abstract 返回值类型 方法名字(参数列表);代码: public interface AMyInterface { public ab ...

  10. 伟景行 citymaker 从入门到精通(1)——js开发,最基本demo,加载cep工程文件

    开发环境:citymaker 7(以下简称cm),jquery,easyui 1.4(界面),visual studio 2012(没有vs,不部署到IIS也行,html文件在本地目录双击打开可用) ...