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. TCP协议 三次握手四次挥手

    当某个应用端想基于TCP协议与另一个应用端通信时,它会发送一个通信请求. 这个请求必须被送到一个确切的地址.在双方“握手”之后,TCP 将在两个应用程序之间建立一个全双工 (full-duplex) ...

  2. JAVA多线程(二) 并发队列和阻塞队列

    github代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo/spb-brian-query-service/ ...

  3. (DP)51NOD 1006 最长公共子序列&1092 回文字符串

    1006 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为:   abcicba abdkscab   ab是两个串的子序列,abc也是,abca也是,其中abc ...

  4. LuoguP2055 [ZJOI2009]假期的宿舍【二分图最大匹配】By cellur925

    题目传送门 这道题开始感觉不出是二分图最大匹配的qwq.但是今天学了匈牙利算法,想来做几个题qwq.做这个题的时候想了很久它哪里是二分图,脑子里是“两列,每列有很多点的那种图 qwq.” 然后看了题解 ...

  5. 害死人不偿命的(3n+1)猜想 (15)

    #include <iostream> #include <algorithm> using namespace std; int main(){ int n; while ( ...

  6. [未读]backbonejs应用程序开发

    买来就没有动过,那阵子刚好离职找工作,之后学backbone的劲头就过去了= =

  7. toLocaleSting()

    之前一直忽略了这一方法,直到前天的笔试题,两种方式实现如下功能... 1234567890→1,234,567,890 当时我的思路是这样的:1.字符串反转,插入逗号,再反转 2.求余数,将字符串一分 ...

  8. HtmlUnit爬取Ajax动态生成的页面内容

    HtmlUnit说白了就是一个浏览器,这个浏览器是用Java写的无界面的浏览器,正因为其没有界面,因此执行的速度还是可以滴. HtmlUnit提供了一系列的API,这些API可以干的功能比较多,如表单 ...

  9. .NET Core WebAPI Swagger使用

    相对于普通的webapi而言,.net core webapi本身并不具备文档的功能,所以可以借助第三方插件:swagger,使用的话很简单. 步骤一. Nuget Packages安装,使用程序包管 ...

  10. 可能是最漂亮的Spring事务管理详解 专题

    微信阅读地址链接:可能是最漂亮的Spring事务管理详解 事务概念回顾 什么是事务? 事务是逻辑上的一组操作,要么都执行,要么都不执行. 事物的特性(ACID): 原子性: 事务是最小的执行单位,不允 ...