CSS技巧笔记

CSS3绘制波浪线

<div class="wrapper">
    <div class="wavy-line"></div>
</div>
.wavy-line {
    width: 100%;
    height: 10px;
    background-image: -webkit-radial-gradient(circle, transparent, transparent 9px, orange 9px, orange 10px, transparent 10px, transparent);
    background-image: -moz-radial-gradient(circle, transparent, transparent 9px, orange 9px, orange 10px, transparent 10px, transparent);
    background-image: radial-gradient(circle, transparent, transparent 9px, orange 9px, orange 10px, transparent 10px, transparent);
    background-size: 20px 20px;
}

 

箭头：

1 <div class="goback"></div>
 1 .goback {
 2       position: absolute;
 3       top: 18px;
 4       left: 18px;
 5       border: 10px solid transparent;
 6       border-right: 10px solid #ccc;
 7     }
 8     
 9     .goback:hover {
10       border-right: 10px solid #808080;
11     }
12     
13     .goback:after {
14       content: '';
15       position: absolute;
16       top: -10px;
17       left: -7px;
18       border: 10px solid transparent;
19       border-right: 10px solid #fff;
20     }

圆点：

1 <div class="circle"></div>
 1 .circle {
 2       position: absolute;
 3       margin: 52px 45px;
 4       width: 12px;
 5       height: 12px;
 6       background: #fff;
 7       border-radius: 50%;
 8       border: 1px solid #2090ff;
 9     }
10     
11     .circle:after {
12       content: '';
13       margin: 3px;
14       display: table;
15       width: 6px;
16       height: 6px;
17       background: #2090ff;
18       border-radius: 50%;
19     }

三角形：

1  <div class="triangle"></div>
1 .triangle {
2       position: absolute;
3       top: 16px;
4       right: 18px;
5       border: 6px solid transparent;
6       border-top: 6px solid #123456;
7     }

清除浮动

1 .clearfix:after{
2       content: " ";
3       display: block;
4       height: 0;
5       line-height: 0;
6       clear: both;
7       zoom:1;
8     
9 }

 列表

 1     <ion-list *ngIf="segmentStatus == 'workUnHandle'">
 2       <div class="list-container">
 3         <div class="list-item">
 4           <div class="list-item-container" *ngFor="let item of RepairTasks;let i = index;" (click)="showModal(item,false,false)">
 5             <div class="avatar">
 6               <img [src]="item.avatar" />
 7               <div class="list-item-status agree" *ngIf="item.laststatus == 1 || item.laststatus == 3 || item.laststatus == 5">
 8                 <span>{{item.level}}</span>
 9               </div>
10               <div class="list-item-status reject" *ngIf="item.laststatus == 2 || item.laststatus == 4 || item.laststatus == 6">
11                 <span>{{item.level}}</span>
12               </div>
13             </div>
14             <div class="list-item-info">
15               <h2>{{item.title}}</h2>
16               <p>{{item.rtname}}</p>
17             </div>
18             <div class="list-item-infoext">
19               <h2>{{item.createtime | stringLength:10}}</h2>
20               <span [class]="item.priorityClass">{{item.priorityName}}</span>
21               <span [class]="item.severityClass">{{item.severityName}}</span>
22             </div>
23           </div>
24         </div>
25       </div>
26     </ion-list>
  1  .list-container {
  2     position: relative;
  3   }
  4   /**********list底线************/
  5   .list-container::after {
  6     content: " ";
  7     position: absolute;
  8     left: 0;
  9     bottom: 0;
 10     right: 0;
 11     height: 1px;
 12     border-bottom: 1px solid #ccc;
 13     color: #ccc;
 14     -webkit-transform-origin: 0 100%;
 15     transform-origin: 0 100%;
 16     -webkit-transform: scaleY(.5);
 17     transform: scaleY(.5);
 18   }
 19   /**********list-item************/
 20   .list-itme {}
 21   /**********list-item-container************/
 22   .list-item-container {
 23     margin: 0 0 0 10px;
 24     padding: 10px 10px 10px 0;
 25     position: relative;
 26     display: flex;
 27   }
 28   /**********list-item-container的上划线************/
 29   .list-item-container:before {
 30     content: " ";
 31     position: absolute;
 32     left: 0;
 33     top: 0;
 34     right: 0;
 35     height: 1px;
 36     border-top: 2px solid #e5e5e5;
 37     color: #e5e5e5;
 38     -webkit-transform-origin: 0 0;
 39     transform-origin: 0 0;
 40     -webkit-transform: scaleY(.5);
 41     transform: scaleY(.5);
 42     left: 0px;
 43     z-index: 2;
 44   }
 45   .list-item-container:first-child:before {
 46     display: none;
 47   }
 48   /**********list-item-container的头像************/
 49   .list-item-container .avatar {
 50     position: relative;
 51   }
 52   .list-item-container .avatar img {
 53     height: 50px;
 54     width: 50px;
 55     border-radius: 10%;
 56   }
 57   .list-item-container .avatar ion-icon {
 58     font-size: 22px;
 59     position: absolute;
 60     left: 40px;
 61     top: 40px;
 62   }
 63   .list-item-container .avatar ion-icon.handler {
 64     color: #488aff;
 65   }
 66   .list-item-container .avatar ion-icon.agree {
 67     color: #32db64;
 68   }
 69   .list-item-container .avatar ion-icon.reject {
 70     color: #f53d3d;
 71   }
 72   .list-item-status {
 73     position: absolute;
 74     left: 38px;
 75     top: 38px;
 76     display: flex;
 77     align-items: center;
 78     justify-content: center;
 79     margin-right: 8px;
 80     flex: none;
 81     width: 24px;
 82     height: 24px;
 83     border-radius: 12px;
 84     background-color: rgba(0, 0, 0, 0.38);
 85     color: #fff;
 86     transition: background-color 225ms cubic-bezier(0.4, 0, 0.2, 1);
 87   }
 88   .list-item-status span {
 89     color: #fff;
 90   }
 91   .agree {
 92     background-color: #4185f4;
 93   }
 94   .reject {
 95     background-color: #f53d3d;
 96   }
 97   /**********list-item-container的信息************/
 98   .list-item-info {
 99     flex: 1;
100     overflow: hidden;
101     margin: 0 20px 0 20px;
102     padding: 8px 0 8px 0;
103   }
104   .list-item-info h2 {
105     display: block;
106     font-size: 14px;
107     overflow: hidden;
108     text-overflow: ellipsis;
109     white-space: nowrap;
110   }
111   .list-item-info p {
112     display: block;
113     font-size: 12px;
114     color: #999;
115     overflow: hidden;
116     text-overflow: ellipsis;
117     white-space: nowrap;
118   }
119   /**********list-item-container的扩展信息************/
120   .list-item-infoext {
121     margin: 0 20px 0 20px;
122     padding: 8px 0 8px 0;
123   }
124   /**********list-item-infoext后的小三角************/
125   .list-item-infoext::after {
126     content: " ";
127     display: inline-block;
128     height: 6px;
129     width: 6px;
130     border-width: 2px 2px 0 0;
131     border-color: #c8c8cd;
132     border-style: solid;
133     -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
134     transform: matrix(.71, .71, -.71, .71, 0, 0);
135     position: relative;
136     top: -2px;
137     position: absolute;
138     top: 50%;
139     margin-top: -4px;
140     right: 10px;
141   }
142   .list-item-infoext h2 {
143     display: block;
144     font-weight: normal;
145     font-size: 12px;
146     color: #c5c5c5;
147     overflow: hidden;
148     text-overflow: ellipsis;
149     white-space: nowrap;
150   }
151   .list-item-infoext span {
152     display: inline-block;
153     /* margin: 0 5px; */
154     font-size: 10px;
155     padding: 1px 8px;
156     border-radius: 15%;
157   }
158   .list-item-infoext span.commonly {
159     color: $commonly;
160     border: solid 1px $commonly;
161   }
162   .list-item-infoext span.urgent {
163     color: $urgent;
164     border: solid 1px $urgent;
165   }
166   .list-item-infoext span.danger {
167     color: $danger;
168     border: solid 1px $danger;
169   }

 

posted @ 2018-06-10 17:04  随心而动2017  阅读(98)  评论(0)    收藏  举报