如圖，鼠標移動到圖上，實現右上角翻頁的效果，本例主要border邊框的設置。
一、基本概念
<html> <head> <style> #demo{ width:0; height:0; border:solid 50px; border-top-color: #f00 ; border-right-color: #ff0 ; border-bottom-color:#0f0; border-left-color:#00f; } </style> </head> <body> <div id="demo"></div> </body> </html>
當元素width和height為0，此時的邊框呈現如上圖所示，相鄰的兩條邊框可以組成新的三角形。
所以我們的翻頁效果就是，藍綠組成新的三角形（顏色設為相同），紅黃組成新的三角形（顏色設為相同），並且邊框寬度逐漸由0變大的過程。
如果要實現翻頁邊框的長寬比，則要對邊界線兩邊的邊框單獨設置，本例即要單獨設置紅藍邊框或者黃綠邊框
<html> <head> <style> #demo{ width:0; height:0; border:solid 50px; border-top-color: #f00 ; border-right-color: #ff0 ; border-bottom-color:#0f0; border-left-color:#00f; border-width: 80px 80px 50px 50px; } </style> </head> <body> <div id="demo"></div> </body> </html>
這是對上/右邊框設置的效果。
完整代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-width效果</title> <style type="text/css"> body { background-color: #eaf0f2; } .paper-flip { position: relative; width: 500px; height: 300px; margin: 0 auto; } /*image-layer*/ .image-layer { width: 500px; height: 300px; overflow: hidden; position: absolute; top: 0; left: 0; } .image-layer img { width: 500px; cursor: pointer; } .image-layer:before { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0; border-top-color: #fff ; border-right-color: #fff; border-bottom-color:rgba(0,0,0,0.5); border-left-color:rgba(0,0,0,0.5); border-radius: 0 0 0 4px; box-shadow: 0 1px 1px rgba(0,0,0,0.5); transition:all 0.4s ease-out; } .image-layer:hover:before{ border-left-width:50px; border-top-width:30px; } </style> </head> <body> <div class="paper-flip" id="paper-flip"> <div class="image-layer" id="image-layer"> <img src="http://p6.qhimg.com/d/inn/3f563406/table.jpg" alt=""> </div> </div> </body> </html>