1. 輪廓
outline 設(shè)置元素的輪廓
使用方式與border一樣。不同在于不影響盒子的大小
2. 陰影
box-shadow 設(shè)置元素的陰影box-shadow: 30px 30px 50px 5px rgba(0, 0, 0, .5);
第一個值：設(shè)置陰影水平距離
第二個值：設(shè)置陰影垂直距離
第三個值：設(shè)置陰影的模糊半徑
第四個值：設(shè)置陰影的尺寸
第五個值：設(shè)置陰影的顏色
第六個值：設(shè)置內(nèi)部還是外部陰影outset 默認(rèn)值，為外部陰影inset 設(shè)置為內(nèi)部陰影
3. 圓角
border-radius 設(shè)置元素的圓角
可以設(shè)置四個角的圓角border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusborder-radius可以直接設(shè)置四個角border-radius: 50px 100px 150px 200px; 左上 右上 右下 左下（順時針）border-radius: 50px 100px 150px; 左上 右上左下 右下文章來源：http://www.zghlxwxcb.cn/news/detail-826113.html
示例如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-826113.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline, shadow, rounded corners</title>
.box1 {
width: 200px;
height: 200px;
background-color: #c7edcc;
margin: 100px auto;
/* 設(shè)置輪廓 */
/* outline: 10px solid red; */
/* 設(shè)置陰影 */
/* box-shadow: 30px 30px 50px 5px rgba(0, 0, 0, .5); */
/* 設(shè)置圓角 */
/* border-radius: 50px 100px 150px 200px; */
/* border-radius: 50px 100px 150px; */
border-radius: 50%;
}
/* .box2 {
width: 300px;
height: 200px;
background-color: #fde6e0;
} */
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
到了這里，關(guān)于re:從0開始的CSS之旅 12. 輪廓、陰影、圓角的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
