官方資料
魚C課程案例庫：https://ilovefishc.com/html5/
html5速查手冊：https://man.ilovefishc.com/html5/
css速查手冊：https://man.ilovefishc.com/css3/
學(xué)習(xí)正文
outline-offset：https://man.ilovefishc.com/pageCSS3/outline-offset.html
box-shadow：https://man.ilovefishc.com/pageCSS3/box-shadow.html
image.png
以上三個屬性分別是：輪廓樣式、輪廓顏色菠净、輪廓寬度目代，同樣可以按順序縮寫。
通過 outline-offset 設(shè)置輪廓在 border 外的偏移量：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素尺寸</title>
<style type="text/css">
p {
width: 10wm;
margin: 20px auto;
padding:20px;
border: 5px solid lightblue;
outline: 20px solid pink;
outline-offset: 5px;
}
</style>
</head>
<body>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim debitis delectus tempore ipsum dolor voluptate mollitia, dolore at eaque aliquam iusto vitae, excepturi consequatur doloremque deleniti soluta quibusdam ab eum!</p>
</body>
</html>
image.png
輪廓并不屬于元素尺寸的一部分嗤练，它并不會影響到原有的頁面布局。
輪廓永遠(yuǎn)是方的在讶，沒有弧度煞抬。
通過 box-shadow 設(shè)置元素陰影：
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素尺寸</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
margin: 50px;
box-shadow: 0 0 8px 8px lightblue, 0 0 8px pink inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
image.png
最后，陰影形狀和邊框形狀是一致的构哺。
