字体图标 盒子阴影
字体图标
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体图标</title> <!-- 使用第三方库 --> <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> --> <!-- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> --> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> <style type="text/css"> .i1 { /*font-size: 30px;*/ color: orange; } </style> </head> <body> <i class="i1 fa fa-spinner fa-4x fa-spin"></i> </body> </html>
盒子阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; margin: 350px auto; /*盒子阴影*/ /*x轴偏移 y轴偏移 虚化长度 阴影宽度 阴影颜色*/ /*多个值之间用,隔开*/ box-shadow: -310px 0 30px 0px yellow, 310px 0 30px -10px green, 0 -310px 30px -10px orange, 0 310px 30px -10px blue; } </style> </head> <body> <div class="box"></div> </body> </html>