盒子邊框

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

摘要：一運行截圖二代碼代碼個代碼

一、運行截圖

二、代碼

　　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 }

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1222.html

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

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

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

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

coordinate35 2019-08-02 11:21 評論0 收藏0
CSS（三）

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

番茄西紅柿 2019-04-23 13:43 評論0 收藏0
CSS學習（二）

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

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

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

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

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

ConardLi 2019-08-29 12:59 評論0 收藏0