码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 box-shadow快速教程

时间:2014-07-18 17:36:26      阅读:368      评论:0      收藏:0      [点我收藏+]

标签:http   color   使用   os   width   2014   

box-shadow 属性向框添加一个或多个阴影。这个CSS3的属性很常用,盒阴影、按钮状态等各种地方都有用到,但是你了解并记住各个参数的作用及用法吗?

展示

源码:http://codepen.io/yisi/pen/sDBwC

语法:http://www.w3cplus.com/content/css3-box-shadow

动图:

bubuko.com,布布扣

使用技巧

 

第一个值控制水平偏移,正值向右,负值向左

第二个值控制垂直偏移,正值向下,负值向上

第三个值控制模糊半径,不允许负值,数值越大阴影的边缘越模糊

第四个值控制扩展范围

最后一个值控制阴影颜色,省略则继承color 属性的颜色

可以添加多个阴影,用逗号隔开

可以使用inset设置内阴影

你会了吗?

CSS3 box-shadow快速教程,布布扣,bubuko.com

CSS3 box-shadow快速教程

标签:http   color   使用   os   width   2014   

原文地址:http://www.cnblogs.com/sunshq/p/3853333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!