box-shadow向元素添加阴影效果

简介: div{   box-shadow: 10px 10px 5px #888888;} 语法:box-shadow: h-shadow v-shadow blur spread color inset; 值 描述 测试h-shadow 必需。

div
{
  box-shadow: 10px 10px 5px #888888;
}

语法:box-shadow: h-shadow v-shadow blur spread color inset;

值 描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。 测试

 

.mydiv{
  width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*ie*/
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
  -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
  box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}

目录
相关文章
|
前端开发
css3阴影box-shadow
css3阴影box-shadow
|
15天前
box-shadow属性
box-shadow属性。
30 8
|
11月前
|
Web App开发 iOS开发
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
CSS3 给边框添加阴影 -- box-shadow属性
523 1
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
|
10月前
|
前端开发
CSS3 box-shadow 属性
CSS3 box-shadow 属性
47 0
|
前端开发
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素、:checked伪类、::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Switch开关效果的按钮.
486 0
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
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
|
前端开发
css:box-shadow实现单边,多边阴影
css:box-shadow实现单边,多边阴影
216 0
css:box-shadow实现单边,多边阴影
|
前端开发
CSS3中border-radius、box-shadow与gradient那点事儿
border-radius用于添加圆角边框,用处非常广泛。
CSS3中border-radius、box-shadow与gradient那点事儿
|
Web App开发 前端开发 iOS开发