总结6个CSS3阴影使用方法介绍
前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。
css3能实现的效果非常多,今天我就来总结下用css3实现阴影效果的方法和技巧:
若有多重阴影,用逗号分隔,且依次往下叠加,最先写的在最上面
若有inset,则为内侧阴影,但要注意:如果只是简单的在原来阴影上加 inset,则阴影在相反一侧内部,并非简单翻转反向。
一个值设置的是盒子的四个角的水平和垂直半径 每个角都可以单独进行设置,取值顺序是左上 右上 右下 左下顺时针设置 可以简写,逻辑跟padding和margin一样 单位支持像素,和百分比(参照的是宽度和高度)
可以用 水平半径/垂直半径去单独控制半径,并且每一个半径都可以单独控制
4. CSS3圆角,阴影,透明_html/css_WEB-ITnose
CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及.
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}
标准语法:
box-shadow : h-offset v-offset blur spread color [ inset ] ,...
[ 偏移量向右下为正值,左上为负值 ]
a、若有多重阴影,用逗号分隔,且依次往下叠加,最先写的在最上面
b、若有inset,则为内侧阴影,但要注意:如果只是简单的在原来阴影上加 inset,则阴影在相反一侧内部,并非简单翻转反向。
相关问答
【相关推荐】
以上就是总结6个CSS3阴影使用方法介绍的详细内容,更多请关注其它相关文章!