CSS是網(wǎng)頁設(shè)計(jì)中不可或缺的一部分。它提供了豐富的樣式和布局選項(xiàng)，可以讓我們的網(wǎng)頁變得更加美觀和易于使用。本文將介紹如何使用CSS創(chuàng)建一個(gè)豎著的圓角按鈕樣式。

.button {
display: inline-block;
padding: 10px 15px;
background-color: #f7f7f7;
border: 2px solid #ccc;
border-radius: 20px;
color: #333;
text-align: center;
font-weight: bold;
transform: rotate(-90deg);
margin: 20px;
}

首先，我們創(chuàng)建一個(gè)名為.button的CSS類。我們使用display:inline-block屬性將按鈕的寬度設(shè)置為其內(nèi)容的寬度，使得按鈕可以緊湊地排列在一起。我們使用padding屬性為按鈕添加一些內(nèi)邊距，以便顯示按鈕內(nèi)容。我們使用background-color屬性設(shè)置按鈕的背景顏色為灰色，我們使用border屬性添加一個(gè)灰色的邊框。border-radius屬性創(chuàng)建圓角效果，值越大，圓角越明顯。color屬性設(shè)置按鈕的字體顏色為黑色，text-align屬性設(shè)置文本居中。font-weight屬性增加文字的粗細(xì)程度，讓文字更加醒目。transform屬性將按鈕沿順時(shí)針方向旋轉(zhuǎn)90度，使其變成豎排按鈕。最后，我們使用margin屬性添加一些外邊距，以便控制按鈕之間的距離。

使用這個(gè)CSS類創(chuàng)建按鈕非常簡單，只需要將一個(gè)元素的類屬性設(shè)置為.button即可。例如，我們可以創(chuàng)建一個(gè)按鈕，這將創(chuàng)建一個(gè)向左旋轉(zhuǎn)的圓角按鈕。

這是使用CSS創(chuàng)建豎著的圓角按鈕的簡單方法。您可以根據(jù)您的需求調(diào)整按鈕的大小和顏色，以及按鈕旋轉(zhuǎn)的程度。如果您希望添加更多的樣式，您可以使用其他CSS屬性和選擇器來創(chuàng)建您自己的按鈕樣式。