CSS3是一種用于網頁設計的語言,它是CSS的升級版,提供了更加強大和靈活的功能。下面是關于CSS3的一些最全的特點和用法。
/* Border-radius邊框圓角 */ .box { border-radius: 10px; } /* Box-shadow盒子陰影 */ .box { box-shadow: 2px 2px 4px rgba(0,0,0,0.2); } /* Linear-gradient線性漸變 */ .box { background: linear-gradient(to right, #ff0000, #00ff00); } /* Text-shadow文字陰影 */ .box { text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } /* Transition過渡動畫 */ .box { transition: all 0.5s ease-in-out; } .box:hover { transform: rotate(45deg); } /* Animation動畫 */ @keyframes move { 0% { transform: translateY(0); } 50% { transform: translateY(-50px); } 100% { transform: translateY(0); } } .box { animation: move 2s ease-in-out infinite; } /* Flexbox彈性盒子布局 */ .container { display: flex; justify-content: center; align-items: center; } /* Grid網格布局 */ .container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 200px; } /* Media queries媒體查詢 */ @media (max-width: 768px) { .box { width: 100%; } } /* Variable variables變量 */ :root { --main-color: #ff0000; } .box { color: var(--main-color); }
以上是CSS3中的一些重要特點和用法,它們可以使網頁設計變得更加美觀、靈活和易于處理。