使用CSS3 border-radius屬性，你可以為任何元素製作"圓角"，border-radius屬性，可以使用以下規則：
（1）四個值：第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角（2）三個值：第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角（3）兩個值：第一個值為左上角與右下角，第二個值為右上角與左下角（ 4）一個值：四個圓角值相同
如果想要圖形變成圓角效果，只需要加入一個屬性就行了，border-radius 這個屬性。如果想圓的厲害那麼這個值就變大一些。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<style>
div{
width: 100px;
height: 100px;
background-color: rgb(151, 26, 49);
border-radius: 10px;
}
img{
width: 100px;
height: 100px;
border-radius: 10px;
}
</style>
</head>
<body>
<div>
<img src="../vue/1.jpg">
</div>
</body>
</html>如果想要變成圓形，那麼就寫100%就行了。
box-shadow 陰影效果
margin: 0 auto：上下不需要管，auto是讓左右的空間平均分配，然後讓盒子在中間，這就是居中。讓左右空間的間隙平均分配就是auto的作用。
0代表水平方向沒有陰影，第二個0代表垂直方向沒有陰影，第三個是陰影的模糊度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
div{
width: 500px;
height: 500px;
background-color: greenyellow;
margin: 0 auto;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="d1">
</div>
</body>
</html>到此這篇關於CSS3 新特性box-shadow 陰影效果、圓角border-radius的文章就介紹到這了,更多相關CSS3 新特性box-shadow內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！