隨著互聯網技術的快速發展,越來越多的新的屬性被添加到CSS中。其中,CSS3是最新版本的CSS,包含了許多新的特性,如圓角、漸變、陰影等。本文將介紹CSS3中一些新的瀏覽器支持屬性。
/*多欄布局*/ #container { column-count: 3; /*設置列數為3*/ column-gap: 20px; /*設置列之間的間距為20px*/ } /*文本溢出處理*/ .text { overflow: hidden; /*隱藏超出部分*/ text-overflow: ellipsis; /*在末尾顯示省略號*/ white-space: nowrap; /*強制文本在一行中顯示*/ } /*彈性盒子*/ .flex-container { display: flex; /*使用彈性盒子布局*/ justify-content: space-between; /*在主軸上將項目平均分布*/ align-items: center; /*在交叉軸上將項目居中對齊*/ flex-wrap: wrap; /*將項目進行多行排列*/ } /*自適應字體大小*/ h1 { font-size: calc(24px + 2vw); /*使用vw作為字體大小單位,根據視口寬度進行計算*/ } /*3D變換*/ .box { transform: translateZ(100px); /*將元素向屏幕外平移100px,產生3D效果*/ } /*還有很多新的瀏覽器支持屬性等著我們去探索,CSS3讓Web開發更加豐富多彩!*/
上一篇css3新增鏤空魔幻
下一篇css3旋轉x軸