css3盒模型
弹性盒模型
在使用弹性盒模型的时候 父元素必须要加display:box 或者display:inline-box。
box-orient定义盒模型的布局方向
- horizontal 水平显示
- vertical 垂直方向
box-direction 元素排列顺序
- normal 正序
- reverse 反序
box-ordinal-group 设置元素的具体位置
box-flex 定义盒子的弹性空间
子元素的尺寸= 盒子的尺寸*（子元素的box-flex属性值/所有子元素的box-flex属性值的和）
box-pack 对盒子富裕的空间进行监管
- start 所有子元素在盒子左侧显示，富裕空间在右侧。
- end 所有子元素在盒子右侧显示，富裕空间在左侧。
- center 所有子元素居中。
box-algin 在垂直方向上对元素的位置进行监管
- start 所有子元素局顶
- end 所有子元素局底
- center 所有子元素垂直居中。
box-shadow:[inset] x y blur [spread] color
inset: 投影方向
inset：内投影
默认外投影x、y：阴影偏移
- blur：模糊半径
- spread 扩展阴影半径，先扩展原有形状，再画阴影
color 颜色
box-reflect 倒影（目前仅webkit浏览器支持）
<style type="text/css"> body {background: #000;} img{display: block; margin: 100px auto; -webkit-box-reflect: right 10px -webkit-linear-gradient(right, rgba(0,0,0,1) 0, rgba(155,155,155,0.4) 100%);} } </style>
<body>
<img src="hello.png">
</body>- direction 方向 above|below|left|right
- 距离 （可选）
- 渐变 （可选 -webkit-linear-gradient(right, rgba(0,0,0,1) 0, rgba(155,155,155,0.4) 100%);）
resize 自由缩放
- both 水平垂直都可以缩放
- horizontal 只有水平方向可以缩放
- vertical 只有垂直方向可以缩放
- 一定要配合overflow:auto 一块使用
box-sizing 盒模型解析模式
content-box 标注盒模型
width/height =content+ border+padding
border-box 怪异盒模型
width/height = content-padding-border
下面是示例
-webkit-box-pack:justify效果
代码
<style type="text/css"> .box {height: 100px; border: 10px dashed #000; padding: 10px;display: -webkit-box; -webkit-box-orient:horizontal; -webkit-box-pack:justify;} .box div {height: 100px; width: 100px; background: red;border: 1px solid #fff; } </style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>box-shadow结合伪类before和after制作翘边阴影
代码
<!-- css部分 -->
body{font-family:Arial;
font-size:23px;}
.wrap h3{
text-align:center;
position:relative;
top:80px;
}
.wrap {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
}
.effect:before, .effect:after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
ul.box {
width:980px;
height:auto;
margin: 20px auto;
padding: 0;
clear: both;
overflow: hidden;
}
ul.box li {
list-style-type: none;
margin:20px 10px;
padding: 0;
width: 300px;
height: 220px;
border: 2px solid #efefef;
position: relative;
float: left;
background: #ffffff; /* old browsers */
line-height:220px;
font-size:32px;
text-align:center;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
}
ul.box li:before {
z-index: -2;
position: absolute;
background: transparent;
width: 90%;
height: 80%;
content: '';
left: 20px;
bottom:8px;
-webkit-transform: skew(-12deg) rotate(-4deg);
-moz-transform:skew(-12deg) rotate(-4deg);
-o-transform: skew(-12deg) rotate(-4deg);
-ms-transform: skew(-12deg) rotate(-4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
ul.box li:after {
z-index: -1;
position: absolute;
background: transparent;
width: 90%;
height: 80%;
content: '';
right:20px;
bottom:8px;
-webkit-transform: skew(12deg) rotate(4deg);
-moz-transform:skew(12deg) rotate(4deg);
-o-transform: skew(12deg) rotate(4deg);
-ms-transform: skew(12deg) rotate(4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}
.box li img{
width:290px;
height:210px;
padding:5px;
}
<!-- html -->
<div class="wrap effect">
<h3>Shadow Effect</h3>
</div>
<ul class="box">
<li><img src="images/photo1.jpg"/></li>
<li><img src="images/photo2.jpg"/></li>
<li><img src="images/photo3.jpg"/></li>
</ul>