css3的box-shadow(阴影)说明

css3的box-shadow(阴影)说明

作者: admin

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

box-shadow具体使用方法,语法:
 
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
 
换句说:
对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
 
取值:投放方式:默认是外阴影
 
box-shadow属性至多有6个参数设置,他们分别取值:
 
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影;
 
X-offset:是指阴影水平偏移量其值可以是正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
 
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;
 
阴影模糊半径:此参数是可选,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
 
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小。
注释:当阴影类型选为inset时,阴影水平偏移量为正值时,阴影是在对象的左边框的里面(左边框的右边)和上边框的里面(上边框的底部),为负值时则相反;此理解和上面理解的正值在对象右边显示,负值在对象左边显示为同一个道理,我只是将它和边框联系起来解释而已。
 
 
例子:
input{
   width:120px;
   height:33px;
   line-height:33px;
   padding-left:10px;
   color:#b4b4b4;
   border: 1px solid #939393;
   border-radius:4px;
   box-shadow:inset 1px 1px 4px #d9d9d9;
   -webkit-box-shadow: inset 1px 1px 4px #d9d9d9;
   -moz-box-shadow: inset 1px 1px 4px #d9d9d9;
  }
 
 
若是想要四个边框都有阴影可以写多个阴影样式,在它们之间加个“,”号即可,例如:
 
box-shadow:inset 1px 1px 4px #d9d9d9,inset 1px 1px 4px #d9d9d9;同时为内阴影
 
box-shadow:inset 1px 1px 4px #d9d9d9,1px 1px 4px #d9d9d9;内阴影和外阴影。

另外据是text-shadow是文字阴影的意思。
分享到:
打赏
未经允许不得转载:

作者: admin, 转载或复制请以 超链接形式 并注明出处 轻尘云网络
原文地址: 《css3的box-shadow(阴影)说明》 发布于2020-2-8

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

css3的box-shadow(阴影)说明

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap