首页 > 程序开发 > 综合编程 > 其他综合 >

盒子边框运行展示

2019-02-18

盒子边框运行展示。运行截图如下。

盒子边框

一、运行截图

  \

二、代码

  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 }
相关文章
最新文章
热点推荐