-moz-box-shadow
css的box-shadow是用来添加边框阴影效果的。

属性值详解:
1、inset
可选值,默认阴影在盒子外
使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在。
2、<offset-x> <offset-y>
这是头两个<length> 值,用来设置阴影偏移量。offset-x为设置阴影的水平位移,假如是负值,那么阴影在边框的左侧;offset-y设置阴影的垂直位移,假如是负值,那么阴影位于边框顶部。这个用数学中的数轴来理解应该是可以的,如下图:
我们的水平原点是以边框的左上角为起始点,x为水平位移,Y为垂直位移。
3、<blur-radius>
指定模糊半径,不允许负值,假如设置为0,则阴影不模糊,否则设置越大的值,边框阴影就越模糊。
4、<spread-radius>
指定阴影拓展,假如设置为0,不拓展,正值阴影扩大,负值缩小。
demo:
(1)输入框内阴影
.shadow (
-moz-box-shadow: inset 0 0 10px #CCC;
-webkit-box-shadow: inset 0 0 10px #CCC;
box-shadow: inset 0 0 10px #CCC;
)
(2)简单效果
.one (
-moz-box-shadow:5px 5px;
-webkit-box-shadow:5px 5px;
box-shadow:5px 5px;
)

(3)虚阴影效果
.two (
-moz-box-shadow:2px 2px 10px #06c;
-webkit-box-shadow:2px 2px 10px #06c;
box-shadow:2px 2px 10px #06c;
)

(4)渐变阴影效果
.three (
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
)

(5)带光晕效果
.four (
-moz-box-shadow:0 0 10px 10px #06c;
-webkit-box-shadow:0 0 10px 10px #06c;
box-shadow:0 0 10px 10px #06c;
)

(6)内阴影效果
.five (
-moz-box-shadow:inset 5px 5px 10px #06c;
-webkit-box-shadow: inset 5px 5px 10px #06c;
box-shadow: inset 5px 5px 10px #06c;
)
(7)彩色阴影
.six (
-moz-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
-webkit-box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
box-shadow:0 0 10px red,
2px 2px 10px 10px yellow,
4px 4px 12px 12px green;
)
-moz-box-shadow的更多相关文章
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件
直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...
- 来看看css3中的box-shadow
不谈IE,只谈谈box-shadow的具体使用方法 语法: E {box-shadow: <length> <length> <length>?<length ...
- 有趣的 CSS 像素艺术
原文地址:https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4 译者:nzbin 友情提示:由于国内网络的原因,Cod ...
- 关于box-shadow属性的一点心得
一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为: box-shadow: 1px 1px 5px rgba(0, 0, 0, .8); 这样,样式看上去会更加柔和,或者 ...
- CSS3 Border-image
CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color,只剩下最后一个边框图片border-image.今天我们就一起来学习这个border ...
- 初学c# -- 学习笔记(五) winfrom无边框四周阴影
刚用到这个功能,网上扯淡的东西太多了,都是2边阴影,还什么窗口叠加.ps作图啥的,什么玩意.还是老外实在,google找的,无边框窗体,四边透明阴影. public partial class For ...
- 【转载】css3 content 生成内容
content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...
- CSS3属性border-radius绘制多种多样的图形
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
随机推荐
- eclipse控制台出现中文乱码的问题
在Eclipse.exe同目录下,在eclipse.ini添加:Dfile.encoding=utf-8
- 九,configMap及secret的基本使用
目录 制定容器配置的方式 configMap(存储数据为明文,敏感数据慎用) 创建configMap的几种方式 命令行创建和测试configMap实例 创建一个Pod 挂载测试 通过指定文件创建con ...
- 建立一个可以不停地接收客户端新的连接,但不能处理复杂的业务的C/S网络程序
在Windows平台上主要有两个版本的Socket Api函数:WinSock 1.1和WinSock 2.2 , 2.2版本默认兼容1.1版本,1.1 winsock.h wsock32.lib w ...
- mongo批量插入问题(insert_many,bulk_write),spark df转json传入mongo
https://blog.csdn.net/nihaoxiaocui/article/details/95060906 https://xuexiyuan.cn/article/detail/173. ...
- QTP(5)
一.检查点 1.位图检查点(Bitmap CheckPoint) (1)作用:主要用于检查UI界面,检查页面布局,包括控件位置.大小.颜色.状态等 (2)确定位图检查点的要素: a.检查哪个控件 b. ...
- 【ZJOI 2016】旅行者
题意 http://uoj.ac/problem/184 题解 大概是神题. 网格图上跑最短路有一个经典的优化方式:分治分组跑最短路. 对于这道题,设矩形长为 \(n\),宽为 \(m\),则对 \( ...
- python和ruby:一些需要注意的小区别。
python和ruby的一些区别 基础区别 运算符号/和// ruby只有/符号.它根据操作的数字类型返回对应的结果.如果数字的类型是int,则返回整除结构,如果是float,则返回float类型的计 ...
- 部署jenkins+git
Jenkins简介 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能 安装并启动思路: 安装准备 ...
- gtid 1032错误案例
gtid 1032错误案例 大致背景: 分别在主从上删除了系统冗余账号. mysql> delete from mysql.user where host='::1';Query OK, 1 r ...
- webuploader如何判断是否上传的是空文件?
在'beforeFileQueued'事件中可以判断: // 当有文件被添加进队列的时候 uploader.on( 'beforeFileQueued', function( file ) { if( ...