1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .center{ 11 200px; 12 margin: auto; 13 } 14 /* 这里是加粗文字 */ 15 .p1 { 16 font-weight: bold; 17 } 18 /* 这里是倾斜文字 */ 19 .p2 { 20 font-style: italic; 21 } 22 /* 这里是文字间距 */ 23 .p3 { 24 letter-spacing: 10px; 25 } 26 /* 这里 是词 间距 */ 27 .p4 { 28 word-spacing: 10px; 29 } 30 /* 这里是首行缩进 */ 31 .p5 { 32 text-indent: 10px; 33 } 34 /* 这里是上划线 */ 35 .p6 { 36 text-decoration: overline; 37 } 38 /* 这里是下划线 */ 39 .p7 { 40 text-decoration: underline; 41 } 42 /* 这里是删除线 */ 43 .p8 { 44 text-decoration: line-through; 45 } 46 /* 这里是衬托文字 */ 47 .p9 { 48 font-family: serif; 49 } 50 /* 这里是非衬托文字 */ 51 .p10 { 52 font-family: sans-serif; 53 } 54 /* 这里是容器盒的阴影 */ 55 .box { 56 200px; 57 height: 300px; 58 background: red; 59 box-shadow: 10px 10px 10px #ccc; 60 } 61 /* 这里是 文字的阴影 */ 62 h1 { 63 text-shadow: 10px 10px 10px #ccc; 64 } 65 /* border边框属性 */ 66 .border{ 67 200px; 68 height: 200px; 69 border-radius: 50% 50%; 70 background: yellow; 71 text-align: center; 72 line-height: 200px; 73 } 74 </style> 75 </head> 76 77 <body> 78 <div class="center"> 79 <p class="p2">这里是倾斜文字</p> 80 <p class="p3">这里是文字间距</p> 81 <p class="p4">这里 是词 间距</p> 82 <p class="p5">这里是首行缩进</p> 83 <p class="p6">这里是上划线</p> 84 <p class="p7">这里是下划线</p> 85 <p class="p8">这里是删除线</p> 86 <p class="p9"> 这里是衬托文字</p> 87 <p class="p10">这里是非衬托文字</p> 88 <div class="box">这里是容器盒的阴影</div> 89 <h1>这里是文字的阴影</h1> 90 <div class="border">我是一个圆</div> 91 92 </div> 93 </body> 94 95 </html>
