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. 黑客攻防技术宝典web实战篇:利用信息泄露习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 当探查 SQL 注入漏洞时,如果请求以下 URL:https://wahh-app.com ...

  2. python之使用request模块发送post和get请求

    import requestsimport json #发送get请求并得到结果# url = 'http://api.nnzhp.cn/api/user/stu_info?stu_name=小黑马 ...

  3. Xor-sequences CodeForces - 691E || 矩阵快速幂

    Xor-sequences CodeForces - 691E 题意:在有n个数的数列中选k个数(可以重复选,可以不按顺序)形成一个数列,使得任意相邻两个数异或的结果转换成二进制后其中1的个数是三的倍 ...

  4. HTML form label

    在表单布局中会遇到label标签的使用,label没有任何样式效果,有触发对应表单控件功能.比如我们点击单选按钮或多选框前文字对应选项就能被选中,这个就是对文字加了<label>标签实现. ...

  5. Android设计模式——MVP

    一.什么是MVP MVP:全称 Model-View-Presenter. MVP框架由3部分组成:View层负责显示,Presenter层负责逻辑处理,Model层提供数据. View:负责绘制UI ...

  6. Java开发笔记(九十五)NIO配套的文件工具Files

    NIO不但引进了高效的文件通道,而且新增了更加好用的文件工具家族,包括路径组工具Paths.路径工具Path.文件组工具Files.先看路径组工具Paths,该工具提供了静态方法get,输入某个文件的 ...

  7. Koa--基于Node.js平台的下一代web开发框架的安装

    koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架. 使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函 ...

  8. 手把手教写devops全栈自动化工具(django2.1)

    简单介绍一下自己之前写的一个全栈项目,框架用的是django2.1版本 主要对paramiko模块,salstack的API二次开发. 核心组件包括:MQ,mysql,websocket,redis, ...

  9. SQL中的SELECT_简单查询语句总结

    --以scott用户下的dept和emp表为例 --注意:如果scott用户不能使用,请使用system用户登录--解锁scott用户ALTER USER SCOTT ACCOUNT UNLOCK;- ...

  10. ubuntu下php-fpm多实例运行配置

    php-fpm服务一般情况下我们只会配置一个php-fpm了,如果我们碰到要实现多实例php-fpm服务要如何来配置呢,下面一起来看看吧. 这里是在LNMP环境的基础上配置多实例的过程.因为我在使用的 ...