效果图
源代码如下
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>条纹边框实现谈盒子模型</title>
6 <style>
7 html {
8 font-family: font-family: Tahoma, Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
9 }
10 div {
11 width: 100px;
12 height: 100px;
13 color: #FFF;
14 padding: 10px;
15 border:dashed 10px rgba(0,0,0,.5);
16 display: inline-block;
17 position: relative;
18 margin: 10px 10px;
19 }
20 .bgColor {
21 background-color: deeppink;
22 }
23
24 .borderBox {
25 background-clip: border-box;
26 }
27 .paddingBox {
28 background-clip: padding-box;
29 }
30 .contentBox {
31 background-clip: content-box;
32 }
33 .bgImg {
34 background-image: url(img/tom.jpg);
35 background-repeat: no-repeat;
36 }
37 .borderBox-after:after {
38 content: "";
39 position: absolute;
40 left: 0;
41 top: 0;
42 bottom: 0;
43 right: 0;
44 background-color: #FFF;
45 }
46 </style>
47 </head>
48 <body>
49 <!--背景色的填充与background-clip有关-->
50 <!--背景色的填充规则默认是从边框左上角到右下角-->
51 <!-- background-clip属性介绍 -->
52 <!--border-box：从border填充背景色
53 padding-box：从padding区域填充背景色
54 content-box：从content区域填充背景。-->
55 <div class="bgColor">从条纹边框谈盒子模型border-box</div>
56 <div class="bgColor paddingBox">从条纹边框谈盒子模型padding-box</div>
57 <div class="bgColor contentBox">从条纹边框谈盒子模型content-box</div>
58 <div class="bgColor contentBox">从条纹边框谈盒子模型content-box</div>
59
60 <div class="bgColor bgImg">从条纹边框谈盒子模型content-box</div>
61 <div class="bgColor paddingBox bgImg">从条纹边框谈盒子模型content-box</div>
62 <div class="bgColor contentBox bgImg">从条纹边框谈盒子模型content-box</div>
63 <div class="bgColor borderBox-after">从条纹边框谈盒子模型border-box</div>
64 </body>
65 </html>
文章转载 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型
时间： 2025-01-16 19:45:22