CSS3的漸變功能可以讓網頁設計更加的絢麗多彩，今天我們來分享一款以灰色為基調的美甲設計。

/* 設置頁面背景為純白色 */
body {
background-color: #ffffff;
}
/* 設置美甲的顏色為灰色漸變 */
.nail-polish {
background: #808080; /* Old browsers */
background: -moz-linear-gradient(top, #d9d9d9 0%, #808080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d9d9d9 0%,#808080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d9d9d9 0%,#808080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/* 設置美甲的形狀 */
.nail-shape {
border: 5px solid #ffffff;
border-radius: 50%;
height: 80px;
width: 80px;
position: relative;
}
/* 設置美甲的邊框 */
.nail-outline {
position: absolute;
top: -11px;
left: -11px;
right: -11px;
bottom: -11px;
border: 11px solid #ffffff;
border-radius: 50%;
}

這樣，我們就完成了一款灰色漸變美甲的設計。這種設計風格適合于各種不同的場合，無論是正式的工作場合還是休閑的娛樂場所都非常適合。通過漸變設置的灰色，讓美甲更加具有質感和層次感。