今天帶給大家一段實例程式碼，怎麼用CSS3做出關門開門的效果，需要用到的屬性有border-width， border-style等，我們一起來看一下。
border-width：邊框的寬度 thin 細的
medium 默認的
thick 粗的
不常用
數值px
border-style:none 沒有邊框 = hidden（用於表格除外，用來解決表格邊框衝突）
dotted 點狀
dashed 虛線
border-color
:十六進位 #fff transparent 透明
# border: 1px solid #000;## border-top: 1px solid #000;上邊框
## border-top-color
border-right：
border-bottom:
border-left:
css3新增的屬性border-image: 使用圖片填滿邊框
border-image-source:圖片的來源，路徑 ## border-image-width：圖片的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{
width: 300px;
height: 400px;
background: url(img/05.jpg);
background-size:cover;
margin: 150px auto;
position: relative;
overflow: hidden;
}
.left{width: 100%;
height: 100%;
background: rgba(122,0,0,0.5);
position: absolute;
top: 0;
left: -100%;
transition: all 2s;
}
.right{
width: 100%;
height: 100%;
background: rgba(0,0,135,0.5);
position: absolute;
top: 0;
left: 100%;
transition: all 4s;
}
#box:hover .left{
left:-50%
}
#box:hover .right{
left:50%
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
</div>
</body>
</html>以上是CSS3怎麼做關門效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
