CSS作為現代網頁設計中不可或缺的一部分，有著非常重要的作用。除了功能性的布局，CSS還可以通過一些好看的樣式代碼來增加網頁的視覺效果，讓設計更加優雅和吸引人。 下面是一些CSS樣式代碼，它們都非常簡單易懂，并且具有視覺上的美感。

按鈕樣式：

button {
border:none;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
padding: 0.5em 1em;
margin: 0.5em;
background-color: #445566;
color: #ffffff;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
cursor: pointer;
transition: all 0.5s ease;
}
button:hover {
background-color: #778899;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

這個樣式可以應用到所有按鈕中，使它們看起來更加美觀。鼠標指向按鈕時，顏色和陰影都會變化，提高用戶體驗。

文本毛邊效果：

h1 {
font-family: 'Open Sans', sans-serif;
font-size: 5em;
text-transform: uppercase;
-webkit-text-stroke: 2px #000000;
color: #ffffff;
}

該效果在大標題上效果非常突出，使文字看起來更加生動活潑。通過css的text-stroke屬性，給文字添加了黑色描邊，使得文字非常突出，但又不至于顯得太過單調。

帶陰影的圖像：

img {
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
transition: all 0.5s ease;
}
img:hover {
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
transform: scale(1.2);
}

這段代碼可以為網頁上所有的圖像添加陰影效果，并在鼠標指向時，陰影效果會變得更加明顯，同時還會有一個伸縮效果，讓整個頁面看起來更加動感。

下劃線樣式：

a {
color: #587568;
position: relative;
text-decoration: none;
}
a:hover:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -2px;
left: 0;
background-color: #587568;
transition: all 0.5s ease;
}
a:hover {
color: #a3bcc3;
}

該樣式用于所有連接，除了當鼠標指向它們并且動畫開始時，它們會發生顏色變化外，還會出現一個懸停下劃線效果，使頁面顯得更加高雅和美觀。 雖然這些樣式非常簡單，但它們卻可以增加網頁的美感，使得整個頁面看起來更加精美和專業，從而吸引更多的訪問者。