CSS3是層疊樣式表第三個版本,其中新增了一些新元素,這些新元素可以讓我們在布局與設計中更加自由。
/* 圓角屬性 */ border-radius: 10px; /* 可以為每個角單獨添加半徑,也可以為所有角添加一個半徑 */ /* 盒模型屬性 */ box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3); /* 可以添加陰影效果 */ box-sizing: border-box; /* 可以改變盒子模型的大小,讓padding和border不計入盒子大小 */ /* 選擇器 */ :nth-child(2) /* 選擇第二個子元素 */ :not(p) /* 排除p元素 */ :active /* 用戶點擊時的樣式 */ /* 動畫屬性 */ transition: all 0.2s ease-in-out; /* 可以添加元素的過渡效果 */ animation: myanimation 2s infinite; /* 可以添加元素的動畫效果 */ /* 彈性盒子屬性 */ display: flex; /* 將元素設置為彈性盒子 */ flex-direction: column; /* 指定主軸的方向 */ align-items: center; /* 指定交叉軸對齊方式 */ justify-content: space-between; /* 指定主軸對齊方式 */ /* 漸變屬性 */ background: linear-gradient(to bottom, #f2f2f2, #e6e6e6); /* 可以在元素背景上添加漸變效果 */
這些新增元素可以大大提高設計的效率和美觀程度,所以在使用CSS時,要善于使用這些新增元素。