我就喜欢不用图片做圆角之山顶角方法

最新推荐文章于 2015-03-16 13:35:43 发布

weixin_30663391

最新推荐文章于 2015-03-16 13:35:43 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/roytanlu/archive/2012/05/16/2505576.html

版权

1、基本思路是用几条线叠加；
2、如果是4条线的话，边距（margin）依次是5、3、2、1；
3、下图中的上图常用于网站导航标签，下图中的下图常用于网站各种标签；

 1 <style type="text/css">
 2 .item{ width: 107px; }        /*定义1个类元素*/
 3 .item p{        /*在类中的段落*/
 4     margin:0px;
 5     padding:5px;        /*padding和字体高度匹配*/
 6     background:yellow;}
 7 .item div{        /*在类中的层*/
 8     height: 1px;
 9     background: yellow;}
10 .item .row1{        /*在类中的类*/
11     margin: 0 5px;}        /*上下边距为0，左右边距为5*/
12 .item .row2{
13     margin: 0 3px;}
14 .item .row3{
15     margin: 0 2px;}
16 .item .row4{
17     margin: 0 1px;
18     height: 2px;}        /*为了美观给点高度*/
19 </style>
20 <body>
21     <div class="item">
22         <div class="row1"></div>
23         <div class="row2"></div>
24         <div class="row3"></div>
25         <div class="row4"></div>
26         <p>就不喜欢图片</p>
27     </div>
28     <p></p>
29     <div class="item">
30         <div class="row1"></div>
31         <div class="row2"></div>
32         <div class="row3"></div>
33         <div class="row4"></div>
34         <p>也不喜欢图片</p>
35         <div class="row4"></div>
36         <div class="row3"></div>
37         <div class="row2"></div>
38         <div class="row1"></div>
39     </div>    
40 </body>