CSS是一種用于網頁設計的語言，可以通過CSS來美化網頁的排版和樣式。以下是一些CSS界面設計的案例，讓你可以參考和學習。

.wrapper {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background-color: #ddd;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
text-align: center;
line-height: 200px;
font-size: 30px;
}

上面的代碼是一個居中顯示的正方形盒子。使用了`display: flex`來實現盒子的居中，`background-color`用于盒子的背景色，`border-radius`實現了圓角，`box-shadow`實現了陰影，`text-align`和`line-height`實現了內容的居中。

.navbar {
background-color: #333;
}
.nav-link {
color: #fff;
text-decoration: none;
padding: 10px 15px;
font-size: 20px;
}
.nav-link:hover {
background-color: #555;
}

上面的代碼是一個導航欄的樣式，使用了`background-color`來設定導航欄的背景色，`color`設定字體的顏色，`text-decoration: none`去掉下劃線，`padding`設定間距，`font-size`設定字體大小。另外，使用了 hover 偽類來實現鼠標浮動時的背景色變化。

.carousel {
position: relative;
overflow: hidden;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: all .5s ease-in-out;
}
.carousel-item.active {
opacity: 1;
}
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.carousel-indicator {
width: 15px;
height: 15px;
background-color: #ccc;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
.carousel-indicator.active {
background-color: #333;
}

上面的代碼是一個輪播圖的樣式。使用了`position: relative`來給容器定位，`overflow: hidden`隱藏溢出部分。輪播圖的每一項使用了`position: absolute`來實現重疊和淡入淡出效果，`opacity`控制透明度，并使用了 transition 過渡效果。輪播圖下面菜單部分使用了 flex 布局，使用了 hover 和 active 偽類來實現切換效果。

以上是幾個常見的CSS界面設計案例，希望通過這些案例的介紹，你可以更好地掌握CSS，并能夠自己嘗試寫出更加漂亮的網頁設計。