复制代码
1 /*border属性*/
2 div{
3 border:2px;
4 border-radius:25px;/*用于创建圆角*/
5 box-shadow: 10px 10px 5px #888888;/*添加阴影*/}
6
7 #round{border-image: url(border.png) 30 30 round;
8 -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
9 -o-border-image:url(border.png) 30 30 round;/* Opera */
10 }
11 #stretch{
12 border-image:url(border.png) 30 30 stretch;
13 -webkit-border-image:url(borde.png) 30 30 stretch;
14 -o-border-image:;
15
16 }
17
18 /*背景*/
19 div{
20 background-image: url(img.png);
21 background-size: 80px 60px;/*指定背景图像的大小*/
22 background-repeat: no-repeat;
23 }
24 div{
25 background-image: url(img.png);
26 background-size: 100% 100%;/*指定背景图片的填充范围*/
27 background-repeat: no-repeat;
28 background-origin: content-box;/*指定背景图片的位置区域参数有border-box.padding-box.content-box*/
29
30 }
31 body
32 {
33 background-image:url(img_flwr.gif),url(img_tree.gif);/*允许加入多个图形*/
34 }
35
36
37 /*gradients渐变 -在两个或多个指定的颜色之间显示平稳的过渡*/
38
39 /*语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);*/
40
41 #grad{/*上到下的线性渐变*/ /*IE9及之前的版本不支持这个属性*/
42 background: -webkit-linear-gradient(red,blue);/*safari5.1-6.0*/
43 background: -moz-linear-gradient(red,blue);
44 background: -o-linear-gradient(red,blue);
45 background: linear-gradient(red,blue);/*标准语法*/
46
47 }
48 #grad{/*左到右的线性渐变*/
49 background: -webkit-linear-gradient(left,red,blue);/*safari5.1-6.0*/
50 background: -moz-linear-gradient(left,red,blue);
51 background: -o-linear-gradient(left,red,blue);
52 background: linear-gradient(left,red,blue);
53 }
54 #grad{/*上左对角线渐变下左*/
55 background: -webkit-linear-gradient(top left,red,blue);/*safari5.1-6.0 默认表示左下角*/
56 background: -o-linear-gradient:(bottom right,red,blue);
57 background: -moz-linear-gradient(bottom right,red,blue);
58 background: linear-gradient(to bottom right,red,blue);/*标准语法，必须放在最后*/
59 }
60
61 /*角度渐变*/
62 /*语法：background: linear-gradient(angle, color-stop1, color-stop2); */
63 #grad{
64 background: -webkit-linear-gradient(90deg,red,blue);
65 background: -o-linear-gradient:(90deg,red,blue);
66 background: -moz-linear-gradient(90deg,red,blue);
67 background: linear-gradient:(90deg,red,blue);/*默认语法，必须放在最后*/
68 }
69 /*带彩虹的线性渐变*/
70 #grad{
71 background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*safari5.1-6.0*/
72 background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
73 background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
74 background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);/*标准的语法，必须放在最后*/
75 }
76
77 /*使用透明度Transparency
78 添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
79 */
80 #grad{/*从左到右的线性渐变，带有透明度*/
81 background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
82 background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
83 background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
84 background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1))/*标准的语法，必须放在最后*/
85 }
86
87 /*重复的线性渐变*/
88 #grad{
89 background:-webkit-repeating-linear-gradient(red,yellow 5%,blue 5%);
90 background: -o-repeating-linear-gradient(red,yellow 5%,blue 5%);
91 background: -moz-repeating-linear-gradient(red,yellow 5%,blue 5%);
92 background: repeating-linear-gradient(red,yellow 5%,blue 5%);
93 }
94
95 /*径向的线性渐变
96 语法：background: radial-gradient(center, shape size, start-color, ..., last-color);
97 默认情况下，渐变的中心是 center（表示在中心点），
98 渐变的形状是 ellipse（表示椭圆形），
99 渐变的大小是 farthest-corner（表示到最远的角落）。
100 */
101 #grad{
102 background: -webkit-radial-gradient(red,green,blue);
103 background: -o-radial-gradient(red,green,blue);
104 background: -moz-radial-gradient(red,green,blue);
105 background: radial-gradient(red,green,blue);
106 }
107 /*径向渐变*/
108 #grad{
109 background: -webkit-radial-gradient(red 5%,green 10%,blue 40%);
110 background: -o-radial-gradient(red 5%,green 10%,blue 40%);
111 background: -moz-radial-gradient(red 5%,green 10%,blue 40%);
112 background: radial-gradient(red 5%,green 10%,blue 40%);
113 }
114 /*设置形状
115 形状有circle(圆形) 或 ellipse(椭圆)*/
116 #grad{
117 height: 150px;
118 width:200px;
119 background:-webkit-radial-gradient:(circle,red,yellow,green);/*safari5.1-6.0*/
120 background: -o-radial-gradient(circle,red,yellow,green);
121 background: -moz-radial-gradient(circle,red,yellow,green);
122 background: radial-gradient(circle,red,yellow,green);/*标准语法，必须放在最后*/
123 }
124
125
126
127
128
129 /*文本效果*/
130 /*文本阴影与换行
131 text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色.
132 word-wrap：break-word*/
133 p{
134 text-shadow:5px 5px 5px #fff;
135 word-wrap:break-word;/*允许长文本换行*/
136 }
137
138 /*css3字体
139 *@font-face规则
140 *Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.
141 Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。
142 Internet Explorer 9 只支持 .eot 字体.
143 *
144 */
145 <style>
146 @font-face
147 {
148 font-family: myfonts;
149 src:url('Sansation_Light.ttf'),
150 url('Sansation_Light.eot');/*for IE 9 定义字体文件的 URL*/
151 font-weight: bold;
152 /*必须添加另一个包含粗体文字的@font-face规则
153 浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体
154 */
155 font-stretch:condensed;/*定义如何拉伸字体*/
156 }
157 div{
158 font-style: myfonts;
159 }
160 </style>
161
162
163 /*2D转换*/
164 /*2D变换方法：
165 translate()
166 rotate()
167 scale()
168 skew()
169 matrix()
170 */
171
172 div{
173 transform:rotate(30deg);/*旋转30度*/
174 -ms-transform:rotate(30deg);/*IE 9*/
175 -webkit-transform:rotate(30deg);
176 }
177
178 /*translate方法*/
179 div{
180 transform:translate(50px,100px);/*从起始位置（o o）移动到位置（50px，100px）*/
181 -ms-transform:translate(50px,100px);
182 -webkit-transform:translate(50px,100px);
183 }
184
185 /*scale方法--scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数*/
186 div{
187 transform:scale(2,4);/*表示宽度变为原来的两倍，长度变为原来的四倍*/
188 -ms-transform:scale(2,4);
189 -webkit-transform:scale(2,4);
190 }
191
192 /*skew方法
193 根据横向（X轴）和垂直（Y轴）线参数给定角度
194 */
195
196 div{
197 transform:skew(30deg,20deg);/*绕X轴和Y轴周围20度30度的元素。*/
198 -ms-transform:skew(30deg,20deg);
199 -webkit-transform:skew(30deg,20deg);
200 }
201
202 /*matrix()方法
203 六个参数，包含旋转，缩放，移动（平移）和倾斜功能
204 */
205 div{
206 transform:matrix(0.886,0.5,-0.5,0.886,0,0);
207 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
208 -webkit-transform:matrix((0.866,0.5,-0.5,0.866,0,0));
209 }
210
211 /*3D转换*/
212 /*rotateX()方法
213 围绕其在一个给定度数X轴旋转的元素
214 */
215 div{
216 transform:rotateX(120deg);
217 -webkit-transform:rotateX(120deg);/*safari and chrome*/
218 }
219 /*rotateY()方法
220 围绕其在一个给定度数Y轴旋转的元素
221 */
222 div{
223 transform:rotateY(120deg);
224 -webkit-transform:rotateY(120deg);
225 }
226
227 /*css3过渡*/
228 div{
229 height: 100px;
230 width:200px;
231 background:blue;
232 transition:width 2s;/*用于宽度属性的过渡效果，时长为 2 秒*/
233 -webkit-transition:width 2s;
234 }
235 div:hover{
236 width: 400px;
237 }
238 /*多项转变*/
239 div{
240 height:100px;
241 width:200px;
242 background:blue;
243 -webkit-transition:width 2s,height 2s,-webkit-transform 2s;/*for safari 3.1-6.0 and chrome */
244 transiton:width 2s,height 2s,transform 2s;
245 }
246 div:hover{
247 width:200px;
248 height: 400px;
249 -webkit-transform:rotate(180deg);
250 transform:rotate(180deg);
251 }
252 /*所有过度属性*/
253 div{
254 width:100px;
255 height:100px;
256 background:blue;
257 transition-property:width;/*规定应用过度的css属性的名称*/
258 transition-duration:2s;/*定义过渡效果花费的时间，默认是0*/
259
260 transition-timing-function:linear;/*规定过渡效果的事件曲线，默认是ease*/
261 transition-delay:2s;/*规定过渡效果开始的时间。默认是0*/
262 /*safari*/
263 /*简写方式：
264 transitiion:width 2s linear 2s;
265 -webkit-transiton:width 2s linear 2s;
266 */
267 -webkit-transiton-property:width;
268 -webkit-transiton-duration:1s;
269 -webkit-transition-timing-function:linear;
270 -webkit-transition-delay:2s;
271 }
272
273
274 /*动画效果*/
275 /*第一种*/
276 div{
277 awidth:200px;
278 height: 200px;
279 background: red;
280 animation:myfirst 5s;
281 -webkit-animation:myfirst 5s;
282 }
283 @keyframes myfirst{
284 from{background:red;
285
286 }to{
287 background:blue;
288 }
289 }
290
291 -webkit-@keyframe myfirst{/*for Safari and chrome*/
292 from{
293 background:red;
294 }to{
295 background:blue;
296 }
297 }
298 /*第二种*/
299 div{
300 width:200px;
301 height: 200px;
302 background: red;
303 animation:myfirst 5s;
304 -webkit-animation:myfirst 5s;
305 }
306
307 @keyframe myfirst{
308 0% {background:red;}
309 25% {background: yellow;}
310 50% {background: blue;}
311 75%{background: green;}
312 }
313 -weblit-@keyframe myfirst{
314 0% {background:red;}
315 25% {background: yellow;}
316 50% {background: blue;}
317 75%{background: green;}
318 }
319
320 /*第三种*/
321 div{
322 width:200px;
323 height:300px;
324 background: red;
325 position: relative;
326 animation:myfirst 5s;
327 -webkit-animation:myfirst 5s;
328 }
329 @keyframe myfirst{
330 0%{background:red;left:0px;top:0px;}
331 25%{background:blue;left:100px;top:0px;}
332 50%{background: green;left:100px;top:100px;}
333 75%{background: yellow;left:0px;top:100px;}
334 100%{background: red;left:0px;top:0px;}
335 }
336 -webkit-@keyframe myfirst{
337 0%{background: red;left:0px;top:0px;}
338 25%{background: blue;left:100px;top:0px;}
339 50%{background: green;left:100px;top:100px;}
340 75%{background:yellow;left:0px;top:100px;}
341 100%{background:red;left:0px;top:0px;}
342 }
343 /*第四种*/
344 div{
345 width:100px;
346 height:100px;
347 background:red;
348 animation-name:myfirst;
349 animation-timing-function:linear;
350 animation-durarion:5s;
351 animation-delay:2s;
352 animation-iteration-count:infinite;
353 animation-direction:alternate;
354 animation-play-state:running;
355 /*safari and chrome*/
356 -webkit-animation-name:myfirst;/**/
357 -webkit-animation-duration:5s;/*设置动画完成的时间*/
358
359 -webkit-animation-timing-function:linear;/*指定动画以什么速度完成播放
360 linear 动画从头到尾的速度是相同的。
361 ease 默认。动画以低速开始，然后加快，在结束前变慢。
362 ease-in 动画以低速开始。
363 ease-out 动画以低速结束。
364 ease-in-out 动画以低速开始和结束。
365 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。*/
366
367 -webkit-animation-delay:2s;/*指定动画延迟几秒后开始*/
368
369 -webkit-animation-iteration-count:infinite;/*定义动画应该播放多少次。
370 n 一个数字，定义应该播放多少次动画
371 infinite 指定动画应该播放无限次（永远）*/
372
373 -webkit-animation-direction:alternate;/*定义是否循环交替反向播放动画,
374 normal默认值,.动画按正常播放。reverse动画反向播放。alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
375 alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
376 initial 设置该属性为它的默认值。
377 inherit 从父元素继承该属性。*/
378
379 -webkit-animation-play-state:running;/*指定动画是否正在运行或已暂停,paused指定暂停动画,running指定正在运行的动画*/
380
381
382 /*简写形式
383 div
384 {
385 animation: myfirst 5s linear 2s infinite alternate;
386 /* Safari and Chrome: */
387 /*
388 -webkit-animation: myfirst 5s linear 2s infinite alternate;
389 } */
390 }
391 /*css3多列*/
392 div{
393 /*column-rule: column-rule-width column-rule-style column-rule-color;*/
394 -moz-column-rule:2px outset #fff;/*指定列之间的规则：宽度，样式和颜色*/
395 -webkit-column-rule:2px outset #fff;
396 column-rule:2px outset #fff;
397
398 -moz-column-gap:20px;/*指定列之间差距*/
399 -webkit-column-gap:20px;
400 column-gap:20px;
401
402 -moz-column-count:3;/*指定列的数量*/
403 -webkit-column-count:3;
404 column-count:3;
405 }
406
407 /*用户界面*/
408
409 div{
410 border:1px solid #ccc;
411 padding:10px 40px;
412 width: 300px;
413 resize:both;/*resize属性指定一个元素是否应该由用户去调整大小。*/
414 overflow:auto;
415
416 }
417 /*调整方框大小box-sizing*/
418 div.container{
419 width:30em;
420 border:1em solid;
421
422 }
423 div.box{
424 box-sizing:border-box;
425 -moz-border-sizing:border-box;/*box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容*/
426 width:50%;
427 border:1em solid #ccc;
428 float:left;
429
430 }
431 /*外形修饰outline-offset*/
432 div{
433 width:200px;
434 height:70px;
435 margin:150px;
436 padding:10px;
437 border:1px solid #ccc;
438 outline:2px solid red;
439 outline-offset:15px;/*规定边框边缘之外 15 像素处的轮廓*/
440
441 }
浙公网安备 33010602011771号