-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest2.html
238 lines (218 loc) · 8.39 KB
/
test2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景与边框</title>
<style>
body {
background-color: pink;
padding: 0% 15% 10%;
}
.bordertest {
padding: 10px;
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;
margin: 10px 10em 10px 10px;
/* height: 450px; */
/* width: 450px; */
}
.boder-box-shadow {
padding: .3em;
background: yellow;
box-shadow: 0 0 0 5px coral,
0 0 0 15px cyan,
0 2px 5px 15px rgba(0, 0, 0, .6);
margin: 25px 10em 10px 10px;
}
.border-outline {
border: 20px solid darkviolet;
outline: 5px dotted deeppink;
outline-offset: -10px;
margin: 10px 10em 10px 10px;
}
.radius {
background: tan;
border-radius: .6em;
padding: 1em;
box-shadow: 0 0 0 .4em teal;
outline: .6em solid teal;
margin-bottom: 3em;
}
.linear {
height: 500px;
}
.linear>.stripes {
height: 200px;
width: 400px;
float: left;
background: linear-gradient(yellow 50%, blue 0);
/* DRY 小技巧，第二个写0便会少一个参数 */
background-size: 100% 6em;
}
.linear>.vertical {
margin: 0 5em;
height: 200px;
width: 200px;
float: left;
background: linear-gradient(90deg, rgb(243, 243, 138) 50%, rgb(75, 209, 250) 50%);
background-size: 4em 100%;
}
.linear>.Diagonal {
height: 200px;
width: 200px;
float: left;
background: linear-gradient(45deg,
rgb(243, 243, 138) 25%,
rgb(75, 209, 250) 0,
rgb(75, 209, 250) 50%,
rgb(243, 243, 138) 0,
rgb(243, 243, 138) 75%,
rgb(75, 209, 250) 75%);
background-size: 4em 4em;
}
.linear>.best_stripes {
margin: 0 4em;
height: 200px;
width: 300px;
float: left;
background: repeating-linear-gradient(60deg,
rgb(243, 243, 138),
rgb(243, 243, 138) 15px,
rgb(75, 209, 250) 0,
rgb(75, 209, 250) 30px);
/* background-size: 4em 4em; */
}
.linear>.transparent {
margin: 0 -200px 0 4em;
height: 200px;
width: 200px;
float: left;
background: #58a;
background-image:repeating-linear-gradient(60deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0,
transparent 30px);
}
.clip_origin{
width: 600px;
height: 400px;
padding: 1em;
border: 6em solid transparent;
background: linear-gradient(white,white),
url(https://tse4-mm.cn.bing.net/th?id=OIP.dar9hzjr7Fu_htkjiYFwOAHaFj&pid=Api&rs=1);
background-origin: border-box;
background-clip: padding-box,border-box;
background-size: 100% 100%;
}
@keyframes ants { to { background-position: 100% } }
.email{
width: 200px;
height: 200px;
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,
red 0,red 12.5%,
transparent 0,transparent 25%,
#58a 0,#58a 37.5% ,
transparent 0,transparent 50%)
0 / 6em 6em ;
/* background-origin: border-box; */
/* background-clip: padding-box,border-box; */
/* background-size: 100% 100%; */
animation: ants 2s linear infinite;
}
</style>
</head>
<body>
<h1>1.背景与边框</h1>
<hr>
<h2>半透明边框</h2>
<div class="bordertest">
<p>当盒子背景为白色的时候，为了凸显透明边框，需要改变背景颜色绘制范围在border内部</p>
<p>添加background-clip: padding-box;</p>
<p>background-clip：背景颜色绘制区域</p>
</div>
<hr>
<h2>2.多重边框</h2>
<div class="borders">
<p>1.border-image添加边框</p>
<p>2.额外的div</p>
<p>3.使用:before属性,hock方式</p>
<p>4.box-shadow</p>
<p>5.outline</p>
<div class="boder-box-shadow">
<h3>box-shadow</h3>
<p> box-shadow: h-shadow v-shadow blur spread color inset;(x偏移，Y偏移，模糊距离，扩展大小，颜色，内绘制)</p>
<p>box-shadow 会增加元素大小,会超出margin，增加的部分不会触发鼠标时间；可以通过inset绘制在内圈</p>
</div>
<div class="border-outline">
<h3>outline</h3>
<p>outline:width style width</p>
<p>只能增加一层边框，可以通过outline-offset生成缝边效果,同样会超出margin（具体看两个边框的大小问题）</p>
<p>只能绘制矩形描边，不会贴合border-radius效果</p>
</div>
</div>
<hr>
<h2>3.灵活的背景定位</h3>
<div class="backgrounds">
<p>1.background-position:25% 75% 改变背景图片偏移量</p>
<p>2.background-origin:默认是padding-box，可以更改（盒模型中top left等的参照坐标）</p>
<p>3.calc(100% - 20px)函数，运算符号前后加空格</p>
</div>
<hr>
<h2>4. 边框圆角</h3>
<div class="radius">
<p>outline不回帖和圆角，box-shadow会。outline会在box-shadow上层</p>
<p>要实现方框内部有圆角，需要outline和box-shadow配合。两者的宽度相等会出现渲染异常，所以需要计算box-shadow宽度</p>
<p>1.outline:width > box-shadow:width > (√2-1)r</p>
<p>2.根据上面公式，局限性outline的宽度必须大于(√2-1)r</p>
</div>
<hr>
<h2>5.条纹背景</h2>
<div class="linear">
<p>1.background-size:背景尺寸，（大小/百分比/cover/contain/precentage）</p>
<p>2.background:linear-gradient()条形渐变</p>
<p>radial-gradient()圆型渐变</p>
<div class="stripes">
<p> DRY 小技巧,为了少维护个参数</p>
<p>background: linear-gradient(yellow 50%, blue 50%);</p>
<p>background: linear-gradient(yellow 50%, blue 0);</p>
<p>repeating-radial-gradient()</p>
</div>
<div class="vertical">
<p>1.加个旋转角度</p>
<p>2.background-size的值颠倒</p>
<p>background: linear-gradient(90deg ，yellow 50%, blue 50%);</p>
</div>
<div class="Diagonal ">
旋转45deg
</div>
<div class="best_stripes">
<p>repeating-radial-gradient:循环加强版</p>
<p>1.维护时减少了颜色的改动位置</p>
<p>2.线条宽度可指定</p>
<p>3.随心所欲改变角度</p>
<p>4.水平垂直用前面方法</p>
</div>
<div class="transparent">
<p>利用透明,同色系条纹</p>
</div>
</div>
<hr>
<h2>伪随机</h2>
<div>
</div>
<hr>
<h2>连续的图片边框</h2>
<div>
<div class="clip_origin">
</div>
<div class="email">
</div>
</div>
</body>
</html>