你的位置:首页 > 软件开发 > 网页设计 > CSS拾遗+技巧集合

CSS拾遗+技巧集合

发布时间:2016-07-05 14:00:09
1、实现尖角符号。这是内联inline-block标签独有的特性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

1、实现尖角符号。

这是内联inline-block标签独有的特性。

CSS拾遗+技巧集合CSS拾遗+技巧集合
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .a{      border-top:30px solid #000000 ;      border-bottom: 30px solid #2c78d5;      border-left:30px solid #1dd537 ;      border-right: 30px solid #ff3021;      display: inline-block;    }    .b{      border-top:30px solid #000000 ;      /*border-bottom: 30px solid #2c78d5;*/      border-left:30px solid #1dd537 ;      border-right: 30px solid #ff3021;      display: inline-block;    }    .c{      border: 30px solid transparent;      /*transparent为透明色*/      margin-top:20px ;      display: inline-block;      border-top:30px solid #000000 ;    }    .c:hover{      margin-top:-10px ;      border: 30px solid transparent;       border-bottom:30px solid #000000;    }    .bb{      border-top:30px solid #000000 ;      /*border-bottom: 30px solid #2c78d5;*/      border-left:30px solid #1dd537 ;      border-right: 30px solid #ff3021;      display: inline-block;    }    /*bb为自己想的方法,不需要改变自身的位置即可。*/    /*bb和b为长方形,其他为正方形*/    .bb:hover{      margin-top:15px ;      border: 0;      border-bottom: 30px solid #2c78d5;      border-left:30px solid #1dd537 ;      border-right: 30px solid #ff3021;    }    .a:hover{    }  </style></head><body>  <div class="a"></div><div class="b"></div>  <div class="bb"></div><div style="background-color: #ff3021;height: 70px">  <div class="c"></div></div></body></html>

原标题:CSS拾遗+技巧集合

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。