CSS3怎麼做關門效果-css教學-PHP中文網

首頁

web前端

css教學

CSS3怎麼做關門效果

php中世界最好的语言

Nov 24, 2017 am 10:42 AM

csscss3

今天帶給大家一段實例程式碼，怎麼用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：圖片的寬度

border-image-outset：圖片擴充 ##

<!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>

效果程式碼就是上面這些了，有興趣的朋友可以手動操作一下，更多精彩請關注php中文網其它相關文章！ ######相關閱讀：#########HTML裡怎麼使用margin 0 auto############html裡div居中需要注意哪些###### ######html裡的if註解怎麼使用######

以上是CSS3怎麼做關門效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn