CSS3如何使用新增邊框屬性制作關門開門效果

這篇文章主要介紹了CSS3如何使用新增邊框屬性制作關門開門效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是專業(yè)的無極網站建設公司，無極接單;提供網站建設、成都做網站,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行無極網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

border:寬度類型顏色小數(shù)不支持

  border-width：邊框的寬度    thin細的 

                               medium默認的

                               thick粗的

                             不常用

                     數(shù)值px

  border-style:none沒有邊框 = hidden（用于表格除外，用來解決表格邊框沖突）

                   solid實線型

                   dotted點狀

                   dashed虛線

                   double雙線

                  

  border-color:十六進制 #fff  transparent透明

  border: 1px solid #000;

  border-top: 1px solid #000;上邊框    

        border-top-width

         border-top-style

         border-top-color

  border-right：

  border-bottom:

  border-left:

css3新增的屬性

border-image: 使用圖片來填充邊框

         border-image-source:圖片的來源，路徑

         border-image-slice：圖片的分割方式

         border-image-width：圖片的寬度

        border-image-outset：圖片擴展

         border-image-repeat：圖片重復

效果實現(xiàn)代碼：

<!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 class="left"></div>

                            <div class="right"></div>

                   </div>

         </body>

</html>

 

 

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3如何使用新增邊框屬性制作關門開門效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

分享標題：CSS3如何使用新增邊框屬性制作關門開門效果
當前網址：http://bm7419.com/article44/jddhhe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供全網營銷推廣、App開發(fā)、Google、外貿網站建設、定制網站、外貿建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設