盒子邊框

番茄西紅柿發(fā)布于2019-04-23 11:50 / 474人閱讀

摘要：一運(yùn)行截圖二代碼代碼個(gè)代碼

一、運(yùn)行截圖

二、代碼

　　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}}個(gè)
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 }

云服務(wù)器 GPU云服務(wù)器 html 盒子邊框比價(jià)盒子盒子比價(jià) 電視盒子

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1222.html

相關(guān)文章

構(gòu)建靜態(tài)頁面之 [ 盒子模型 ]

摘要：盒子模型描述每一個(gè)元素都可以叫做是盒子模型盒子模型的組成內(nèi)容區(qū)元素中內(nèi)容文本圖片等等內(nèi)邊距內(nèi)容區(qū)到邊框的距離邊距內(nèi)容區(qū)的邊界外邊距盒子與盒子之間的距離屬性表示設(shè)置元素的邊框?qū)傩允呛唽憣傩钥梢苑譃楸硎具吙虻膶挾缺硎具吙虻臉邮? 盒子模型描述每一個(gè)元素都可以叫做是盒子模型盒子模型的組成內(nèi)容區(qū) - 元素中內(nèi)容（文本、圖片、等等）內(nèi)邊距 - 內(nèi)容區(qū)到邊框的距離邊距 - 內(nèi)容區(qū)的...

teren 2019-08-29 16:32 評(píng)論0 收藏0
構(gòu)建靜態(tài)頁面之 [ 盒子模型 ]

摘要：盒子模型描述每一個(gè)元素都可以叫做是盒子模型盒子模型的組成內(nèi)容區(qū)元素中內(nèi)容文本圖片等等內(nèi)邊距內(nèi)容區(qū)到邊框的距離邊距內(nèi)容區(qū)的邊界外邊距盒子與盒子之間的距離屬性表示設(shè)置元素的邊框?qū)傩允呛唽憣傩钥梢苑譃楸硎具吙虻膶挾缺硎具吙虻臉邮? 盒子模型描述每一個(gè)元素都可以叫做是盒子模型盒子模型的組成內(nèi)容區(qū) - 元素中內(nèi)容（文本、圖片、等等）內(nèi)邊距 - 內(nèi)容區(qū)到邊框的距離邊距 - 內(nèi)容區(qū)的...

coordinate35 2019-08-02 11:21 評(píng)論0 收藏0
CSS（三）

摘要：盒子模型示意圖如下把元素叫做盒子，設(shè)置對(duì)應(yīng)的樣式分別為盒子的邊框盒子內(nèi)的內(nèi)容和邊框之間的間距盒子與盒子之間的間距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。CSS盒子模型盒子模型解釋元素在頁面中顯示成一個(gè)方塊，類似一個(gè)盒子，CSS盒子模型就是使用現(xiàn)實(shí)中盒子來做比喻，幫助我們設(shè)置元素對(duì)應(yīng)的樣式。盒子模型示意圖如下：把元素叫做盒子，設(shè)置對(duì)應(yīng)的樣式分別為：盒子的邊框(bor...

番茄西紅柿 2019-04-23 13:43 評(píng)論0 收藏0
CSS學(xué)習(xí)（二）

摘要：學(xué)習(xí)二一三大模型之盒子模型盒子模型每個(gè)矩形元素都由元素的內(nèi)容，內(nèi)邊距，邊框，和外邊距邊框盒子的厚度，如手機(jī)包裝盒的厚度內(nèi)邊距內(nèi)容與邊框之間的距離，如填充泡沫的厚度外邊距與其他盒子的距離邊框樣式格式單實(shí)線用的最多虛線點(diǎn)線雙實(shí)線邊框綜合寫法寫 CSS學(xué)習(xí)（二）一、CSS三大模型之盒子模型 1.盒子模型每個(gè)矩形元素都由元素的內(nèi)容，內(nèi)邊距，邊框，和外邊距邊框：盒子的厚度Border，如手...

Near_Li 2019-08-29 15:29 評(píng)論0 收藏0
【靜態(tài)頁面架構(gòu)】CSS之盒子模型

摘要：架構(gòu)盒子模型以內(nèi)容區(qū)顯示文本和圖像內(nèi)邊距內(nèi)容區(qū)至邊距的距離邊距內(nèi)容區(qū)的邊界外邊距元素的邊框之間的距離邊距屬性簡寫屬性用來設(shè)置邊距的上右下左。 CSS架構(gòu) 盒子模型；以內(nèi)容區(qū)(顯示文本和圖像) 內(nèi)邊距(內(nèi)容區(qū)至邊距的距離) 邊距(內(nèi)容區(qū)的邊界) 外邊距(元素的邊框之間的距離) 1.邊距； border屬性；簡寫屬性用來設(shè)置邊距的上(top)右(right)下(bottom)左(lef...

fanux 2019-08-29 16:34 評(píng)論0 收藏0
CSS入門指南-2：盒子模型、浮動(dòng)和清除

摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。這是CSS設(shè)計(jì)指南的讀書筆記，用于加深學(xué)習(xí)效果。上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。盒子模型所謂盒子模型，就是瀏覽器為頁面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。可見的頁面版式主要由三個(gè)屬性...

ConardLi 2019-08-29 12:59 評(píng)論0 收藏0