盒子边框

番茄西红柿发布于2019-04-23 11:50 / 465人阅读

摘要：一运行截图二代码代码个代码

一、运行截图

二、代码

　　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 }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1222.html

构建静态页面之 [ 盒子模型 ]

摘要：盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区 - 元素中内容（文本、图片、等等）内边距 - 内容区到边框的距离边距 - 内容区的...

teren 2019-08-29 16:32 评论0 收藏0
构建静态页面之 [ 盒子模型 ]

摘要：盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区 - 元素中内容（文本、图片、等等）内边距 - 内容区到边框的距离边距 - 内容区的...

coordinate35 2019-08-02 11:21 评论0 收藏0
CSS（三）

摘要：盒子模型示意图如下把元素叫做盒子，设置对应的样式分别为盒子的边框盒子内的内容和边框之间的间距盒子与盒子之间的间距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。CSS盒子模型盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(bor...

番茄西红柿 2019-04-23 13:43 评论0 收藏0
CSS学习（二）

摘要：学习二一三大模型之盒子模型盒子模型每个矩形元素都由元素的内容，内边距，边框，和外边距边框盒子的厚度，如手机包装盒的厚度内边距内容与边框之间的距离，如填充泡沫的厚度外边距与其他盒子的距离边框样式格式单实线用的最多虚线点线双实线边框综合写法写 CSS学习（二）一、CSS三大模型之盒子模型 1.盒子模型每个矩形元素都由元素的内容，内边距，边框，和外边距边框：盒子的厚度Border，如手...

Near_Li 2019-08-29 15:29 评论0 收藏0
【静态页面架构】CSS之盒子模型

摘要：架构盒子模型以内容区显示文本和图像内边距内容区至边距的距离边距内容区的边界外边距元素的边框之间的距离边距属性简写属性用来设置边距的上右下左。 CSS架构盒子模型；以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距； border属性；简写属性用来设置边距的上(top)右(right)下(bottom)左(lef...

fanux 2019-08-29 16:34 评论0 收藏0
CSS入门指南-2：盒子模型、浮动和清除

摘要：会在元素内容而不是元素后插入一个伪元素使用意味着中新增的子元素会被清除左右浮动元素。这一篇主要介绍了盒子模型，浮动和清除。这是CSS设计指南的读书笔记，用于加深学习效果。上一篇介绍了css 的工作原理，这一篇主要介绍盒子模型和浮动。盒子模型所谓盒子模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型在页面上排布。可见的页面版式主要由三个属性...

ConardLi 2019-08-29 12:59 评论0 收藏0