1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .box{
8 height: 200px;
9 background: yellow;
10 }
11 /* before after伪类 必须有content属性才能起作用，值字符串
12 * 相当于子标签，行内元素 */
13 .box:after{
14 content: ‘hello world‘;
15 background-image: url(arrow.png);
16 background-size: 100% 100%;
17 display: block;
18 width: 100px;
19 height: 100px;
20 border: 1px solid darkred;
21 }
22
23 </style>
24 </head>
25 <body>
26
27 <div class="box">
28 打开发动机阿斯蒂芬静安寺多路阀三阶段
29 <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
30 <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
31 <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
32 <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
33 <p>打开发动机阿斯蒂芬静安寺多路阀三阶段</p>
34 </div>
35
36
37 </body>
38 </html>
2
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .box{
8 height: 200px;
9 background: yellow;
10 /*border-bottom: 1px solid #000;*/
11 position: relative;
12 }
13
14
15
16 /* 通过伪类将逻辑1像素在高清屏下，实现物理1像素 */
17 .box:after{
18 content: ‘‘;
19 display: block;
20 height: 1px;
21 width: 100%;
22 border-bottom: 1px solid #000;
23 position: absolute;
24 left: 0;
25 bottom: -1px;
26 transform: scaleY(0.5);
27 }
28 .box:before{
29 content: ‘‘;
30 height: 1px;
31 width: 100%;
32 border-top: 1px solid #000;
33 position: absolute;
34 left: 0;
35 top: -1px;
36 transform: scaleY(0.5);
37 }
38
39 </style>
40 </head>
41 <body>
42
43 <div class="box">
44
45 </div>
46
47
48 </body>
49 </html>
3
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .box{
8 height: 200px;
9 background: yellow;
10 /*border-bottom: 1px solid #000;*/
11 position: relative;
12 }
13
14
15
16 /* 通过伪类将逻辑1像素在高清屏下，实现物理1像素 */
17
18 /*.box:before{
19 content: ‘‘;
20 height: 100%;
21 width: 1px;
22 border-left: 1px solid #000;
23 position: absolute;
24 left: -1px;
25 top: 0;
26 transform: scaleX(0.5);
27 }*/
28
29 .box:before{
30 content: ‘‘;
31 height: 100%;
32 width: 1px;
33 border-right: 1px solid #000;
34 position: absolute;
35 right: -1px;
36 top: 0;
37 transform: scaleX(0.5);
38 }
39
40
41 </style>
42 </head>
43 <body>
44
45 <div class="box">
46
47 </div>
48
49
50 </body>
51 </html>
4
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .box{
8 height: 200px;
9 background: yellow;
10 /*border-bottom: 1px solid #000;*/
11 position: relative;
12 }
13
14
15
16 /* 通过伪类将逻辑1像素在高清屏下，实现物理1像素 */
17 .box:after{
18 content: ‘‘;
19 display: block;
20 height: 1px;
21 width: 100%;
22 border-bottom: 1px solid #000;
23 position: absolute;
24 left: 0;
25 bottom: -1px;
26 transform: scaleY(0.5);
27 }
28 .box:before{
29 content: ‘‘;
30 height: 1px;
31 width: 100%;
32 border-top: 1px solid #000;
33 position: absolute;
34 left: 0;
35 top: -1px;
36 transform: scaleY(0.5);
37 }
38 .box .left{
39 height: 100%;
40 width: 1px;
41 border-left: 1px solid #000;
42 position: absolute;
43 left: -1px;
44 top: 0;
45 transform: scaleX(0.5);
46 }
47 .box .right{
48 height: 100%;
49 width: 1px;
50 border-right: 1px solid #000;
51 position: absolute;
52 right: -1px;
53 top: 0;
54 transform: scaleX(0.5);
55 }
56 </style>
57 </head>
58 <body>
59
60 <div class="box">
61 <span class="left"></span>
62 <span class="right"></span>
63 </div>
64
65
66 </body>
67 </html>
时间： 2024-11-05 11:55:31