第五章 CSS效果
一、效果概念
1.1、box-shadow
Box-shadow：64px 64px 24px 40px rgba(0,0,0,0.4)
Box-shadow：64px 64px 24px 40px rgba(0,0,0,0.4) inset
前兩個參數表示在x軸和y軸的偏移量；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
background:red;
width:200px;
height:200px;
margin: 100px;
/*box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2);*/
box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2);
/*box-shadow: 0 0 0 5px green;*/
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
利用Box-shadow畫一個叮噹貓
1.2、text-shadow
不加text-shadow
加text-shadow
1.3、border-radius
如果使用px來做，由於加了邊框，則計算的時候需要使用內容+邊框的大小來計算。
實現扇形
紅框中的寫法，斜槓前的是水平方向的。斜槓後面是垂直方向上的。
1.4、background
通過漸變可以實現下面的這種效果
背景圖大小的問題
首先背景圖爲下面的熊貓。
展示的效果如下圖所示，可以看到原圖被截掉了。
將背景圖居中顯示。
頂部對齊的方式顯示。
背景圖適配整個背景div。整體不拉伸的模式下全屏。
全屏，但是會把多餘的圖片部分切掉。
1.5、clip-path
1.6、3D變換
1.7、CSS面試
