CSS3 : box-shadow
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的更多相关文章
- CSS3:线上编辑工具及实用资料整理
an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...
- 《图解CSS3:核心技术与案例实战》
<图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...
- CSS3 Flex Box(弹性盒子)
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- CSS3: box-shadow 阴影
box-shadow是给元素块添加周边阴影效果 语法: 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量阴影 模糊半径 阴影扩展半径 阴影颜色 [投影方式] } box-shadow: h- ...
- CSS3:不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- CSS3:{*zoom:1;}作用
CSS3:{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的 ...
- 【css】display:flex和display:box有什么区别
说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...
- CSS3:scrollbar样式设置
CSS3:scrollbar样式设置 1. 设置出现滚动条的方式 overflow:scroll --- x和y方向都会出现滚动条 或者 overflow-x:scroll --- 只有x方向出现滚动 ...
随机推荐
- 【luogu P3388 割点(割顶)】 模板
题目链接:https://www.luogu.org/problemnew/show/P3388 #include <cstdio> #include <cstring> #i ...
- 【题解】洛谷P2822 [NOIP2016TG ]组合数问题 (二维前缀和+组合数)
洛谷P2822:https://www.luogu.org/problemnew/show/P2822 思路 由于n和m都多达2000 所以暴力肯定是会WA的 因为整个组合数是不会变的 所以我们想到存 ...
- Javascript 基础汇总
1 javascript字符串 属性:.length 计算字符串长度 转义字符 \ \n 换行 \r 回车 字符串断行 需要使用反斜杠 \ 2 字符串方法 charAt(n) 返回指定索 ...
- H5新增API和操作DOM
博客原文:https://dobinspark.com.cn/ H5-dom扩展 获取元素 document.getElementsByClassName ('class'); //通过类名获取元素, ...
- iOS Xcode 小技巧,提升理解查询能力,Command + 点击鼠标右键 Jump to Definition等
前言: 介绍下Xcode 小技巧,以及一下快捷键,让你调试程序更加出类拔萃,安排! Command + 点击鼠标右键 Jump to Definition,可能你平时也在用,但是你明白全部的用法吗,试 ...
- MySQL里面的锁
MySQL里面的锁可以分为:全局锁,表级锁,行级锁. 一.全局锁:对整个数据库实例加锁.MySQL提供加全局读锁的方法:Flush tables with read lock(FTWRL)这个命令可以 ...
- Sass 基础(六)
join() 函数 join()函数是将两个列表连接合并成一个列表. >>join(10px 20px, 30px 40px) (10px 20px 20px 40px) >> ...
- Java分享笔记:关于Java反射机制
[1] 关于Java反射机制的概述 1.反射机制的概念:允许程序在执行期,借助于反射相关的API,取得任何类的内部信息,并能直接操作任意对象内部的属性和方法. 2.与反射相关的主要的API:java. ...
- linux命令之文件系统权限操作常用命令
1. umask:设置权限掩码 语法:umask [参数] 命令说明:umask可以单独使用,可以设置目录与文件的默认权限,默认权限掩码是022,所以默认目录权限是777-022=755,读权限是 ...
- bootstrap Table动态绑定数据并自定义字段显示值
第一步:我们在官网下载了bootstrap 的文档,并在项目中引入bootstrap table相关js文件,当然,也要记得引入jquery文件 大概如图: 第二步:定义一个table控件 第三步:j ...