CSS3怎麼做出關門開門效果

最後更新：2017-11-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天給大家帶來一段執行個體代碼，怎麼用CSS3做出關門開門的效果，需要用到的屬性有border-width， border-style等，我們一起來看一下。

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

medium 預設的

thick 粗的

不常用

數值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：圖片重複

效果實現代碼：

<!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中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More