1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>cssborder</title>
6 <style>
7 *{
8 margin: 0;
9 padding:0;
10 }
11 .test1{
12 margin:20px;
13 width: 100px;
14 height: 100px;
15 border: thin solid #666;
16 }
17 .test2{
18 margin:20px;
19 width: 100px;
20 height: 100px;
21 border: medium solid #666;
22 }
23 .test3{
24 margin:20px;
25 width: 100px;
26 height: 100px;
27 border: thick solid #666;
28 }
29 .test4{
30 margin:20px;
31 width: 100px;
32 height: 100px;
33 border: 3px dashed #666;
34 }
35 .test5{
36 margin:20px;
37 width: 100px;
38 height: 100px;
39 border: 3px dotted #666;
40 }
41 .test6{
42 margin:20px;
43 width: 100px;
44 height: 100px;
45 border: 3px double #666;/*双线风格至少要三3px才能出效果*/
46 }
47 .more{
48 width: 120px;
49 height: 20px;
50 border-top:60px double;/*60px的双线边框，边框的空白分别是20px,20px,20px*/
51 border-bottom: 20px solid;
52 margin:60px;
53 cursor: pointer;
54 }
55 /*border-color的默认颜色是color*/
56 .add{
57 position: relative;
58 height: 100px;
59 width: 100px;
60 margin:60px;
61 color: #ccc;
62 transition: color .25s;
63 border:1px solid;
64 cursor: pointer;
65 }
66 .add:before{
67 content: "";
68 display: block;
69 width: 60px;
70 height: 10px;
71 border-color: #ccc;
72 position: absolute;
73 top:50%;
74 left: 50%;
75 margin:-5px 0 0 -30px;
76 border-top:10px solid;
77 }
78 .add:after{
79 content: "";
80 display: block;
81 height: 60px;
82 width: 10px;
83 border-color:#ccc;
84 border-left:10px solid;
85 position: absolute;
86 top:50%;
87 left: 50%;
88 margin:-30px 0 0 -5px;
89 }
90 .add:hover{
91 color:#06c;
92 }
93 .test7{
94 width: 0px;
95 height: 0px;
96 margin:60px;
97 border:50px solid;
98 border-color: red green blue orange;
99 }
100 .test8{
101 width: 50px;
102 height: 50px;
103 margin:60px;
104 border:50px solid;
105 border-color: red green blue orange;
106 }
107 .test9{
108 width: 0px;
109 height: 0px;
110 margin:60px;
111 border:50px solid;
112 border-color: green green transparent transparent;
113 }
114 /*
115 background-positiond定位元素的局限：只能在相对左上角数值定位，不能相对右下角。
116 将图片相对于右边定位：
117 border-right:50px solid transparent;
118 background-position:100% 40px;
119
120
121 100%右侧定位不见算border区域。
122
123 */
124
125 /*border透明边框增加响应区域的大小*/
126 .checkbox{
127 width: 16px;
128 height: 16px;/*如果是这样的话，点击区域太小，用户体验不好*/
129 border:2px solid transparent;/*设置2px的透明边框，整个点击区域的大小变为20px*/
130 box-shadow: inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px;
131 background-color:#fff;
132 background-clip: content-box;
133 color: #d0d0d5;
134 margin:60px;
135 }
136
137 /*
138 border实现等高布局。
139 局限：不支持百分比。
140 */
141
142 .box{
143 margin:60px;
144 border-left:300px solid #222;
145 color: #ccc;
146 }
147 .left{
148 width:300px;
149 margin-left: -300px;
150 float: left;
151 }
152
153 </style>
154 </head>
155 <body>
156 <div class="test1">thin:1px</div>
157 <div class="test2">medium:3px</div>
158 <div class="test3">thick:5px</div>
159 <div class="test4">style:dashed</div>
160 <div class="test5">style:dotted</div>
161 <div class="test6">style:double</div>
162 <div class="more">点击显示更多</div>
163 <div class="add"></div>
164 <div class="test7"></div>
165 <div class="test8"></div>
166 <div class="test9"></div>
167 <div class="checkbox"></div>
168
169 <!--
170 border在布局方面的应用
171 -->
172 <div class="box">
173 <nav class="left">
174 <h3>导航1</h3>
175 <h3>导航1</h3>
176 <h3>导航1</h3>
177 </nav>
178 <section>
179 <div class="module">模块1</div>
180 <div class="module">模块1</div>
181 <div class="module">模块1</div>
182 <div class="module">模块1</div>
183 </section>
184 </div>
185 </body>
186 </html>
时间： 2024-12-23 13:54:20