欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

CSS3新增边框属性制作关门开门效果

 

border: 宽度 类型 颜色 小数不支持

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

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

                   </div>

         </body>

</html>

 

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c14337.shtml

我要分享到:
上一篇:Css3动画属性
下一篇: Css3过渡渐变

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-11-14 10:50 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。