在網頁開發中，CSS 是不可或缺的一部分。下面介紹幾個非常實用的 CSS 技巧。

1. 盒子模型邊框設置

.box {
box-sizing: border-box;
/* 設置 width 和 height 屬性包括 padding 和 border */
/* 默認為 content-box，只包括 content */
}

2. 清除浮動

.clearfix:after {
content: ""; 
display: block; 
clear: both;
}

3. 圓角邊框

.box {
border-radius: 10px;
/* 可以只設置某個角的圓角 */
border-top-right-radius: 20px;
}

4. 把一個元素垂直居中

.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

5. 圖片自適應大小，并且不變形

img {
max-width: 100%; /* 可以根據父元素的寬度來自適應縮放 */
height: auto; /* 長度自動調整，保持原始圖片寬高比 */
}

6. 純 CSS 實現三角形

.triangle {
width: 0; 
height: 0; 
border-width: 20px; /* 三角形大小 */
border-style: solid; 
border-color: transparent transparent #000 transparent;
/* 一個透明邊框，三個不透明邊框組成三角形 */
}

7. 文字超出省略號

.text {
white-space: nowrap; /* 文本不換行 */
overflow: hidden; /* 隱藏超出的文本 */
text-overflow: ellipsis; /* 使用省略號表示被隱藏的文本 */
}

以上就是一些非常實用的 CSS 技巧，可以幫助你更高效地開發網頁。