css3盒模型

zxc123e發表於2015-10-30
CSSS3模型

彈性盒模型

在使用彈性盒模型的時候 父元素必須要加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>

相關文章