box-shadow 用于设置边框阴影,语法:

 box-shadow: h-shadow v-shadow blur spread color inset;
-moz-box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow:
必需。水平阴影的位置。允许负值。
必需。垂直阴影的位置。允许负值。
可选。模糊距离
可选。阴影的尺寸
可选。阴影的颜色
可选。将外部阴影 (outset) 改为内部阴影。

如果要实现四边相同阴影效果,只设置阴影模糊半径和阴影颜色,比如: box-shadow: 0 0 10px #06c;

各参数说明如下:

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色
inset 可选。将外部阴影 (outset) 改为内部阴影。

CSS3 : box-shadow的更多相关文章

  1. CSS3:线上编辑工具及实用资料整理

    an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...

  2. 《图解CSS3:核心技术与案例实战》

    <图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...

  3. CSS3 Flex Box(弹性盒子)

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  4. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  5. CSS3: box-shadow 阴影

    box-shadow是给元素块添加周边阴影效果 语法: 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量阴影 模糊半径 阴影扩展半径 阴影颜色 [投影方式] } box-shadow: h- ...

  6. CSS3:不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  7. 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  8. CSS3:{*zoom:1;}作用

    CSS3:{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的 ...

  9. 【css】display:flex和display:box有什么区别

    说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...

  10. CSS3:scrollbar样式设置

    CSS3:scrollbar样式设置 1. 设置出现滚动条的方式 overflow:scroll --- x和y方向都会出现滚动条 或者 overflow-x:scroll --- 只有x方向出现滚动 ...

随机推荐

  1. 基础算法之Dijkstra最短路径

    核心思想:以起始原点为中心,想外层扩展,知道扩展到重点为止. 设到A点的最短路径上,A点前驱节点为B,则该路径包含到达节点B的最短路径. S集合代表已经探索过的节点,U集合表示未探索过的节点. 时间复 ...

  2. Android学习笔记_41_TabHost自定义标签和TraceView性能测试

    一.tabhost第一种用法,通过在帧布局放入定义好的page页面来实现,这样导致在当前activity下代码量比较大. 1.页面布局: |        |        |        |    ...

  3. 促销规则 promotion rule

    参考:http://www.cnblogs.com/winstonyan/archive/2012/10/29/b2c_research_promotion_engine_and_rule_1.htm ...

  4. JavaScript:对事件的反应

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. php中的变量作用域

    <?php include_once $_SERVER['DOCUMENT_ROOT'].'/includes/db.inc.php'; function totalJokes() { try{ ...

  6. 使用classList来实现两个按钮样式的切换

    classList属性的方法:add();remove();toggle(); 描述,在一些页面我们需要使用两个按钮来回切换,如图: 我们要使用到add()和remove()方法 html部分: &l ...

  7. Python 学习笔记(六)Python第一个程序

    Python 语句 赋值语句 1.将3对象赋值给了变量a 2.将3,4赋值给了变量a,b >>> a = 3 >>> a ,b = 3,4 >>> ...

  8. DHTML---HTML5

    1. HTML概述 网页是网站的表现层,各种编程语言(如Java)构成后台的逻辑,我们将后台逻辑做好然后通过页面表达.同时通过网页来与后台进行交互.而Html是我们做网页的基础,由浏览器来解析. 1. ...

  9. seajs简单使用

    背景:在做一个功能时需要用到一个JS库,但是这个库比较大,想要在只有用到这个功能时再去加载这个库. <script src="~/Scripts/jquery-1.10.2.min.j ...

  10. ABAP术语-Object Type

    Object Type 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/06/1093159.html Description created ...