我們在網頁開發中經常需要使用CSS來美化我們的頁面。下面就來一些只用CSS的例子，幫助你更好地理解CSS的妙用。

/* 示例1 - 豎向的居中 */
.main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

這個例子可以讓一個元素在父容器中居中，這在實際開發中非常實用。只需在父容器上添加如上樣式，子元素就會沿著垂直和水平兩方向居中對齊。

/* 示例2 - 伸縮布局實現響應式網格 */
.col {
flex-basis: 100%;
flex: 1;
@media only screen and (min-width: 768px) {
flex-basis: calc(50% - 10px);
margin: 5px;
}
@media only screen and (min-width: 1200px) {
flex-basis: calc(33.33% - 10px);
}
}

這個例子可以讓一個網格布局具有響應式適應性。我們經常需要根據屏幕尺寸的不同來調整布局，以確保在各種設備上都可以獲得良好的閱讀體驗。以上代碼可以使元素按照 1:2:3 的比例分成三個欄目，并且在 768px 和 1200px 兩個分界點做出相應的調整。

/* 示例3 - 漸變背景 */
.gradient-bg {
background: linear-gradient(to bottom right, #ff00ff 0%, #00ffff 100%);
}

這個例子可以用來創建各種漸變效果的背景色。通過指定起點和終點的顏色，我們可以創建從一種顏色過渡到另一種顏色的美麗效果。

/* 示例4 - 切角效果 */
.cut-corner {
position: relative;
padding: 20px;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 20px solid red;
border-right: 20px solid transparent;
z-index: 10;
}
}

這個例子可以用來創建獨特的切角效果。上面的代碼基于絕對定位使用偽元素（:before）來創建一個三角形形狀，這實際上是通過創建一個小于整個元素的三角形來實現的。

如你所見，CSS非常強大，一旦你掌握了它的奧秘，你就可以制作出各種驚人的效果。