CSS3(Cascading Style Sheets 3)是一種適用于Web頁面的樣式表語言,它可以讓頁面變得更加美觀、生動和有趣。下面,我們將介紹一些CSS3的應用案例。
/*圓角*/ .border-radius{ border-radius:50%; } /*漸變色背景*/ .gradient-bg{ background: linear-gradient(to bottom right, #FFC107, #e91e63); } /*文字陰影*/ .text-shadow{ text-shadow: 2px 2px 4px #000000; } /*過渡效果*/ .transition{ -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /*旋轉動畫*/ .rotate{ -webkit-animation: rotate 2s infinite linear; animation: rotate 2s infinite linear; } /*媒體查詢*/ @media (max-width: 768px){ .mobile-style{ font-size: 14px; color: #333333; } }
.border-radius類可以讓一個元素的邊框變成圓角。.gradient-bg類可以讓一個元素的背景呈現(xiàn)漸變色。.text-shadow類可以給文字添加陰影效果。.transition類可以讓一個元素在鼠標懸停時過渡變化。.rotate類可以讓一個元素進行旋轉動畫。而@media可以讓樣式在不同尺寸的屏幕上顯示不同。
通過應用這些CSS3特性,我們可以讓Web頁面更加生動、美觀和豐富,更好地滿足用戶的需求。
上一篇iframe和vue