CSS3是CSS語言的升級，提供了許多強大的新特性，例如Flex布局、漸變、動畫等。這篇文章將為大家揭秘CSS3中的一些隱藏功能。

/*偽元素*/
p::before {
content: "開始：";
font-size: 16px;
color: #333;
}
p::after {
content: "結束。";
font-size: 16px;
color: #333;
}
/*屬性選擇器*/
input[type="text"] {
width: 300px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
}
/*字體*/
@font-face {
font-family: "MyFont";
src: url("myfont.otf");
}
body {
font-family: "MyFont", Arial, sans-serif;
}
/*多列布局*/
.container {
columns: 3;
column-gap: 20px;
}
/*濾鏡*/
img {
filter: grayscale(50%);
}
/*響應式設計*/
@media screen and (max-width: 768px) {
.container {
columns: 1;
}
}

通過使用偽元素，我們可以在元素的前面或后面插入內容。屬性選擇器可以選擇元素的特定屬性值。通過@font-face，我們可以在網頁中使用自定義字體。多列布局可以將內容分成多欄顯示。濾鏡可以添加不同的效果，例如灰度、模糊等。

而響應式設計則是現代網頁設計的重要部分，可以根據屏幕尺寸的不同來優化網頁的顯示效果。