CSS3 box-shadow

简介:

内阴影效果(偏移值都为正):

#box-shadow{
	-moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */
	-webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */
	box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */
}

内阴影效果(偏移值都为负):

#box-shadow2{
	-moz-box-shadow:-5px -5px 5px #999 inset;             /* For Firefox3.6+ */
	-webkit-box-shadow:-5px -5px 5px #999 inset;          /* For Chrome5+, Safari5+ */
	box-shadow:-5px -5px 5px #999 inset;                  /* For Latest Opera */
}

内阴影效果(水平偏移为负,垂直偏移为负):

#box-shadow3{
	-moz-box-shadow:-5px 5px 5px #999 inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:-5px 5px 5px #999 inset;           /* For Chrome5+, Safari5+ */
	box-shadow:-5px 5px 5px #999 inset;                   /* For Latest Opera */
}

内阴影效果(水平偏移为正,垂直偏移为负):

#box-shadow4{
	-moz-box-shadow:5px -5px 5px #999 inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:5px -5px 5px #999 inset;           /* For Chrome5+, Safari5+ */
	box-shadow:5px -5px 5px #999 inset;                   /* For Latest Opera */
}

* 还可以试试把某个偏移值设置为0,这时阴影的效果就只是单边的



本文转自 风雨萧条 51CTO博客,原文链接:http://blog.51cto.com/1095221645/1834414,如需转载请自行联系原作者

相关文章
|
前端开发
css3阴影box-shadow
css3阴影box-shadow
121 0
|
前端开发
前端 CSS 经典:box-shadow
前端 CSS 经典:box-shadow
150 1
|
Web App开发 iOS开发
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
CSS3 给边框添加阴影 -- box-shadow属性
2483 1
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
|
前端开发
CSS3 box-shadow 属性
CSS3 box-shadow 属性
91 0
|
前端开发
css实现3D弹性按钮以及box-shadow特性说明
css实现3D弹性按钮以及box-shadow特性说明
277 0
|
前端开发
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素、:checked伪类、::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Switch开关效果的按钮.
647 0
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
|
前端开发
css:box-shadow层级问题-相邻元素背景遮盖了阴影
css:box-shadow层级问题-相邻元素背景遮盖了阴影
188 0
css:box-shadow层级问题-相邻元素背景遮盖了阴影
|
前端开发
css:box-shadow实现单边,多边阴影
css:box-shadow实现单边,多边阴影
284 0
css:box-shadow实现单边,多边阴影
CSS 04 盒子阴影效果box-shadow
box-shadow: h-shadow v-shadow blur spread color inset h-shadow 必须。水平阴影半径的位置,允许负值 v-shadow 必须。垂直半径阴影 blur 可选,模糊半径设置 color 可选,阴影颜色 inset 可选,内阴影 <div class="ceng rotate_left"> <img src='yjx.jpg' alt=''> <p> 上海鲜花港的郁金香,花名未闻 </p> </div> <div class="ceng rotate_right"> <img
|
Web App开发 iOS开发
CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)
CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)
941 0