1
2
3
4
5
6
css3新增边框、阴影、背景、文本、字体7
8 /*border-radius:边框圆角 圆角直径*/
9 div#ceshi{
10 width:200px;
11 height:200px;
12 background-color:#f90;
13 margin-bottom:50px;
14 /*border-radius: 50%;15 border-radius: 200px;*/
16 border-radius:1px 10px 30px 70px;/*顺时针*/
17 border-radius:1px 10px 30px;/*对角线*/
18 border-radius:1px 10px;
19 border-radius:10px;
20 }
21
22 /*#ceshi{23 box-shadow: 10px 20px 30px 10px purple inset;24 }*//*X偏移 Y偏移 阴影模糊值 阴影往外延伸 阴影颜色 内阴影*/
25 #ceshi{
26 box-shadow:10px 20px 30px 10px red;
27 }
28
29 /*border-image:url('') X y round/repeat/stretch30 边框图片环绕/平铺/拉伸*/
31 div.box{
32 width:128px;
33 height:128px;
34 background-color:#ccc;
35 margin:0 auto;
36 border:30px solid transparent;
37 /*border-image:url('images/b.png') 20 20 round;*/
38 border-image-source:url('images/b.png');
39 border-image-slice:20;
40 border-image-width:10;
41 border-image-outset:1;
42 border-image-repeat:round;
43 margin-bottom:100px;
44 }
45
46 /*背景样式background-size*//*background-origin背景图大小和位置*/
47 .pic{
48 width:400px;
49 height:300px;
50 border:10px solid red;
51 background:url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1314383665,2282288429&fm=11&gp=0.jpg) no-repeat;
52 background-size:50%;/*容器宽度乘百分比为背景图大小*/
53 background-origin:border-box;/*边框区域*/
54 background-origin:padding-box;/*内边框区域*/
55 background-origin:content-box;/*有效区域*/
56 }
57
58 /*文本字体*/
59 .text{
60 text-shadow:5px 1px 2px red;/*文本阴影*/
61 width:400px;
62 border:1px inset green;
63 margin-top:50px;
64 word-break:break-all;/*单词折行*/
65 word-wrap:break-word;
66 font-family:dhnblog;
67 }
68
69 /*自定义字体类型*/
70 @font-face{
71 font-family:dhnblog;
72 src:url('images/fzm.ttf');
73 }
74
75
76 window.οnlοad=function(){77 varobj=document.getElementById('ceshi')78 obj.οnclick=function(){79 console.log('音乐不能阻碍工作，是为了更好的服务工作')80 }81 }82
83
84
85
