CSS3中內置了許多有用的函數,可以幫助我們更方便地編寫樣式。
/* 內置函數-顏色操作 */ div{ color: rgba(255, 0, 0, 0.5); /* 設置顏色透明度 */ background-color: hsla(120, 100%, 50%, 0.5); /* 設置背景色透明度 */ border-color: rgb(255, 0, 0); /* 設置邊框顏色 */ } /* 內置函數-文本效果 */ h1{ text-shadow: 2px 2px 5px #c5c5c5; /* 文本陰影 */ word-wrap: break-word; /* 換行 */ text-overflow: ellipsis; /* 文字過長時,使用省略號表示 */ } /* 內置函數-布局調整 */ #box{ transform: rotate(45deg); /* 旋轉 */ transform: scale(2); /* 縮放 */ transform: skew(20deg, 10deg); /* 傾斜 */ transform: translate(50px, 100px); /* 移動 */ } /* 內置函數-漸變 */ div { background: linear-gradient(to right, red, yellow); /* 線性漸變 */ background: radial-gradient(circle, blue, green); /* 徑向漸變 */ } /* 內置函數-動畫效果 */ @keyframes move{ 0%{ transform: scale(1); } 100%{ transform: scale(1.5); } } div { animation: move 0.5s ease-in-out infinite; /* 動畫效果 */ }
通過使用這些內置函數,我們可以更加靈活地控制樣式,同時也可以提高代碼的可讀性和可維護性。
上一篇css3關聯錨點
下一篇mysql查詢執行順序