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)
}
相关文章
|
7月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
68 0
|
2月前
|
前端开发 UED
如何使用css给一个盒子加上好看的hover阴影效果
如何使用css给一个盒子加上好看的hover阴影效果
96 1
|
2月前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
|
5月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
34 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
6月前
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
6月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
7月前
|
前端开发
前端 CSS 经典:box-shadow
前端 CSS 经典:box-shadow
103 1
|
7月前
|
前端开发 容器
CSS之弹性盒子Flexible Box
CSS之弹性盒子Flexible Box
css3文字阴影和盒子阴影
css3文字阴影和盒子阴影
|
前端开发
CSS 阴影效果
CSS 阴影效果