字體圖標 盒子陰影
阿新 • • 發佈：2018-09-29
tex awesome -s type html spa styles 使用 idt
字體圖標
<!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>
字體圖標 盒子陰影