前端技术

当前位置:AG亚游集团 > 前端技术 >

CSS3 box-shadow的使用方法

时间:2015-07-04        阅读:次        QQ群:182913345

       text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。
 
       基本语法:{box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}
 
       box-shadow属性的参数设置取值:
       阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;
       X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
       Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
       阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
       阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
       阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。
 
浏览器的兼容:
CSS3 box-shadow的使用方法

       为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式,Firefox浏览器则需要写成-moz-box-shadow的形式。

.box-shadow{  
	/Firefox4f2fd0-  
	-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  

	/Safariand Google chrome10.0-  
	-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  

	/Firefox4f2fd0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9  
	box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  
}  

上一篇:AG亚游集团JS 输出指定范围内的随机数

下一篇:AG亚游集团jQuery 实现全选和取消全选功能

扫一扫,更多精彩内容推送

PHP技术分享

分享PHP技术,前端技术,数据库,SEO优化,服务器,网络安全等知识,是php程序员工作学习的好帮手!

Copyright © 2013-2015.PHP技术分享 AG亚游集团 www.zhanxiqi.com  版权所有  网站地图    AG亚游集团

免责声明:网站内容收集于互联网,本网站不承担任何由于内容的合法性及健康性所引起的争议和法律责任。

欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。 沪ICP备15014499号-2

AETOS艾拓思:无法妥协 英国将欧盟议案定为违宪 进球gif-不光快还暴力!阿奇姆彭凌空世界波双响 中国去年太阳能投资865亿美元 领跑全球 广西柳州一居民楼发生地陷出现约30平方米大坑 人工智能导播战略发布 跨时代的校园足球智能时代到来 美媒:贸易争端或导致美国经济陷入衰退 本季NBA最快50胜!火箭离队史纪录还只差8场 曝东区首席盯上绿军替补!场均10+6值多少钱 年轻妈妈躲进办公桌下做这事 背后这幕太心酸 知识付费面临供给量问题:知乎在精品与大众十字路口 中国渔船遭阿根廷海警鸣枪追赶 参赞约见阿方促查 美F-22伴飞俄图-95MS 俄方:美飞行员举止得当
少年100块钱吃3星期考上清华:贫困对我来说是历练 中财办副主任:新预算法后有地方政府变换花样举债 F1巴塞罗那试车首日:里卡多最快 阿隆索第五 半场-王永珀闪袭金信煜争议扳平 权健暂1-1全北 海军潜艇学院教授:要抢占海洋基础理论研究要地 经济周期或进入新阶段 分析师表示黄金的机会到了! 英特尔未来两年将在以色列投资50亿美元建厂 特朗普前竞选经理出庭受审 面临18项财务欺诈指控 卡纳瓦罗:一段时间内下滑可以接受 队员思想沉重 土耳其东南部安全形势仍严峻 外交部吁暂勿前往 朝韩峰会晚宴引发领土争议 日本:撤下这道甜点 辽宁舰喊话中国首艘国产航母:加入我们 并肩战斗
人工智能为互联网释新红利 BAT巨资押注已成角逐之势 菜油形成突破之势 沥青尝试封闭缺口 政府“无会周” 北京市长和副市长分头行动去了哪 亲缘赛江芮夫妇三连胜夺冠 韩国父女获亚军 山西煤企高管被控受贿1900余万元 曾向白培中行贿 观点:杰克逊空位只是理论上 方硕敢投勇于担当 宋丹中将已接替李晓峰任中央军委政法委书记(图) 不是台北 网友称做好这个市长才有资格在台湾执政 交通部:7月1日起全面禁止不合规车辆运输车通行 一万元猪舍建设图片 没学历女生做什么工作 最有前景的十大行业 拿回家做的手工活大批 AG亚游集团