CSS 04 盒子阴影效果box-shadow

简介: box-shadow: h-shadow v-shadow blur spread color inseth-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

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 src='zgg.png' alt=''>
    <p>
        2010年世博会,中国馆
    </p>
</div>
body{
    background-color:#e9e9e9
}
.ceng{
    width:294px;
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    box-shadow: 2px 2px 20px #aaa;
}
.rotate_left{
    flat:left;
    transform:rote(7deg)
}
.rotate_right{
    flat:left;
    transform:rote(-8deg)
}
相关文章
|
4月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
28 0
|
7月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
|
8月前
|
前端开发 容器
css中的弹性盒子和弹性布局
css中的弹性盒子和弹性布局
|
2月前
|
前端开发 容器
CSS之弹性盒子Flexible Box
CSS之弹性盒子Flexible Box
|
7月前
Css-弹性盒子
Css-弹性盒子
52 0
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
5月前
|
前端开发
【CSS】解决图片和盒子底部产生的缝隙问题
【CSS】解决图片和盒子底部产生的缝隙问题
|
6月前
|
前端开发
CSS3 box-shadow 属性
CSS3 box-shadow 属性
30 0
|
6月前
|
前端开发
CSS 阴影效果
CSS 阴影效果
|
7月前
css3阴影效果
css3阴影效果
42 0