首页 > > 网页制作 > css >

盒子边框

2019-02-17 01:48:42来源：博客园阅读 ()

一、运行截图

二、代码

　　html代码：

 1 <div id="box" style="min-height:253px;">
 2   <span class="one"></span>
 3   <span class="two"></span>
 4   <span class="three"></span>
 5   <span class="four"></span>
 6 
 7   <nz-card   style="background-color: #13123a;border: 0px;color: white;background-color: transparent;">
 8       <div style="padding:24px 12px;">
 9               <p style="font-size: 16px;margin-bottom: 0px;color: #8cc5fe;background-image: url('./../../assets/images/title.png');width: 250px;background-size: contain;background-repeat: no-repeat;height: 28px;line-height: 28px;padding-left: 10px;margin-left: -12px;margin-top: -12px;">{{installationrankingsComponentConfig.title}}</p>
10 
11               <p *ngFor="let item of installationrankingsComponentConfig.data" style="line-height: 60px;height: 36px;color: #87c8fc;">
12                   <span class="province_name" style="width:35%;float: left;position: relative;font-size: 12px;">
13                       {{item.provincename}}
14                   </span>
15                   <span class="progress_container" style="width: 51%;float: left;position: relative;left: 2%;">
16                       <nz-progress [nzPercent]="item.percent"  nzType="line" nzStatus="active"  [nzStrokeWidth]="20" ></nz-progress>
17                   </span>
18                   <span class="percent_container" style="width:12%;float: right;position: relative;font-size: 12px;padding: 0px;line-height: 13px;margin-top: 18px;">
19                     {{item.devicenum}}个
20                     {{item.percent}}%
21                   </span>
22               </p>   
23       </div>
24   </nz-card>  
25 
26 </div>

　　css代码：

 1 #box{
 2     /* height: 200px; */
 3     min-height: 200px;
 4     box-shadow: 0 0 1px 1px #0f3a6c, 0 0 6px 1px #0f3a6c inset;
 5     margin: 0 auto;
 6     position: relative;
 7     padding: 5px;
 8     box-sizing: border-box;
 9     color: #fff;
10     margin-bottom: 10px;
11 }
12 #box span{
13     position: absolute;
14     width:60px;
15     height:30px;
16 }
17 #box .one{
18     width: 14px;
19     height: 14px;
20     left:0;
21     top:1px;
22     border-top:1px solid #1890ff;
23     border-left:1px solid #1890ff;
24     margin:-1px 0 0 -1px;
25 }
26 #box .two{
27     width: 14px;
28     height: 14px;
29     right:0;
30     top:1px;
31     border-top:1px solid #1890ff;
32     border-right:1px solid #1890ff;
33     margin:-1px -1px 0 0;
34 }
35 #box .three{
36     width: 14px;
37     height: 14px;
38     left:0;
39     bottom:0;
40     border-left:1px solid #1890ff;
41     border-bottom:1px solid #1890ff;
42     margin:0 0 -1px -1px;
43 }
44 #box .four{
45     width: 14px;
46     height: 14px;
47     right:0;
48     bottom:0;
49     border-right:1px solid #1890ff;
50     border-bottom:1px solid #1890ff;
51     margin:0  -1px -1px 0;
52 }