几种div框集合

前言： 

因为项目需要，从网上找了些div框的样式，在这里集合记录一下，方便下次使用

基础点

<p style=border-style:none>无边框</p>

<p style=border-style:dotted>点线式边框</p>

<p style=border-style:dashed>破折线式边框</p>

<p style=border-style:solid>直线式边框</p>

<p style=border-style:double>双线式边框</p>

<p style=border-style:groove>槽线式边框</p>

<p style=border-style:ridge>脊线式边框</p>

<p style=border-style:inset>内嵌效果的边框</p>

<p style=border-style:outset>突起效果的边框</p>

div框 

<div style="border-right: 3px outset; border-top: 3px outset; background: #ffffff;border-left: 3px outset; width: 100%; border-bottom: 3px outset; height: 100%" align=left>几种div框集合</DIV>

<br>

<div style="border-right: 3px inset; border-top: 3px inset; background: transprant; border-left: 3px inset; width: 100%; border-bottom: 3px inset; height: 100%" align=left>几种div框集合</div>

<br>

<div style="border-right: 3px double #000000; border-top: 3px double #000000; background: #ffffff; border-left: 3px double #000000; width: 100%; border-bottom: 3px double #000000; height: 100%" align=left>几种div框集合</div>

<br>

<div style="border-right: 7px groove; border-top: 7px groove; background: transprant; border-left: 7px groove; width: 100%; border-bottom: 7px groove; height: 100%" align=left>几种div框集合</div>

<br>

<div style="border-right: 7px ridge; border-top: 7px ridge; background: #ffffff; border-left: 7px ridge; width: 100%; border-bottom: 7px ridge; height: 100%" align=left>几种div框集合</div>

<br>

<div style="border-right: 2px dashed #000000; border-top: 2px dashed #000000; background: transpant; border-left: 2px dashed #000000; width: 100%; border-bottom: 2px dashed #000000; height: 100%" align=left>几种div框集合</div>

  依次如下图：

来源：

 给div加个阴影和过渡效果

. card{

/*延迟过度*/    
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box; /* Opera */
    transition: all 0.3s linear;/*0.3s过渡时间*/
    -moz-transition: all 0.3s linear; /* Firefox 4 */
    -webkit-transition: all 0.3s linear; /* Safari 和 Chrome */

}

.card:hover{

   box-shadow:0px 20px 10px -15px #ccc;

   /*边框*/

   border: solid 1px rgba(102, 146, 191, 0.68);

   /*边角弧度*/

   border-radius: 10px;

}

给div加渐变或条纹背景

http://www.w3cplus.com/content/css3-gradient 

http://www.w3cplus.com/css3/css-secrets/striped-backgrounds.html