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. 蒟蒻ACMer回忆录 · 一段弱校ACM的奋斗史

    三年半的ACM生涯终于迎来了终点,退役之时,感慨万分,故写此文以纪念逝去的时光,那些为ACM拼搏的日子,那段弱校ACM的奋斗史. 三年半的ACM生涯,窝见证了CUMT从打铁到铜牌的突破,又见证了从铜牌 ...

  2. RobotFrameWork自动化系列:安装配置

    1.   RobotFrameWork安装配置 1.1. 安装环境 64位win10家庭中文版 网上很多这方面的教程,但是比较零散,这里是自己安装配置的一个简单的笔记. 1.2. 安装说明 由于Rob ...

  3. python浅拷贝深拷贝

    copy_list=list[:]  得到的是浅拷贝,即只能顶层拷贝,里面的嵌套不会复制一份. a = [0, [1, 2], 3] b = a[:] a[0] = 8 a[1][1] = 9 请问现 ...

  4. oracle中的用户详解 【转】

      oracle中的用户很多,也很令初学者费解.oracle中的帐户分为两类:一类是必需的帐户,一类是存储各种应用的帐户 用户名 密码 描述 ANONYMOUS ANONYMOUS 访问http的匿名 ...

  5. 单机版solr6.3和分布式solr6.3的安装部署

    一.单机版的solr部署 我的是在windows下安装的,linux同理 1. 安装JDK8,并配置好环境变量,一般我们经常开发的电脑上应该都有JDk了,所以这一步可以忽略. 2. 解压solr6.3 ...

  6. c#很好用的定时器Quartz--含附件

    1.引用附件中的两个DLL 2.创建类 public class QuartzJob:IStatefulJob { private static ISchedulerFactory factory = ...

  7. T4308 数据结构判断

    https://www.luogu.org/record/show?rid=2143639 题目描述 在世界的东边,有三瓶雪碧. ——laekov 黎大爷为了虐 zhx,给 zhx 出了这样一道题.黎 ...

  8. VBScript(一)

    visual basic Script 好像是以个老掉牙的服务器端脚本语言,低版本的IE浏览器支持在浏览器里执行 几个特点 1. 大小写不敏感 2.在服务器端 inputBox, msgBox不被支持 ...

  9. Android CursorAdapter的使用

    CursorAdapter继承于BaseAdapter,为Cursor和ListView连接提供了桥梁. 首先看一下CursorAdapter的部分源码: /** * @see android.wid ...

  10. android开发工具eclipse的安装与配置

    l开发主要应用Eclipse 3.7版本. l辅助工具为jdk.Androidsdk Android环境搭建   –1.1.JDK安装 –1.2.Eclipse安装 –1.3.Android SDK安 ...