今天帶給大家一段實例程式碼,怎麼用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中文網其他相關文章!