CSS3技術可以讓我們實現各種炫酷的頁面效果,其中標題欄的樣式也可以通過CSS3代碼實現。下面就讓我來介紹一下幾種不同的CSS3標題欄樣式。
/* 1. 簡單的標題欄樣式 */ .header { background-color: #333; color: #fff; height: 50px; line-height: 50px; padding: 0 20px; font-size: 18px; font-weight: bold; } /* 2. 漸變色標題欄樣式 */ .header { background: linear-gradient(to bottom, #00c9ff, #92fe9d); color: #fff; height: 50px; line-height: 50px; padding: 0 20px; font-size: 18px; font-weight: bold; } /* 3. 左右漸變色標題欄樣式 */ .header { background: linear-gradient(to left, #00c9ff, #92fe9d); background: linear-gradient(to right, #00c9ff, #92fe9d); background-size: 200%; background-position: left; color: #fff; height: 50px; line-height: 50px; padding: 0 20px; font-size: 18px; font-weight: bold; animation: slide 3s linear infinite; } @keyframes slide { to { background-position: right; } } /* 4. 圓角樣式標題欄 */ .header { background-color: #333; color: #fff; height: 50px; line-height: 50px; padding: 0 20px; font-size: 18px; font-weight: bold; border-top-left-radius: 5px; border-top-right-radius: 5px; }
以上就是幾種不同的CSS3標題欄樣式,在實際應用中可以根據不同的需求進行設置。希望以上內容能夠對大家有所幫助。
上一篇css 頂端距離
下一篇css3來回旋轉效果代碼