CSS是網頁設計和開發中不可或缺的一部分。隨著Windows 8操作系統的推出,許多網站都開始采用Windows 8風格的設計。本文將會介紹一些常用的Windows 8效果的CSS屬性。
/* Windows 8效果的外邊距和內邊距 */ .win8 { margin: 10px; padding: 15px; } /* Windows 8效果的圓角 */ .win8-rounded { border-radius: 5px; } /* Windows 8效果的盒子陰影 */ .win8-shadow { box-shadow: 0px 0px 10px #eee; } /* Windows 8效果的漸變背景 */ .win8-gradient { background: #4285f4; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #4285f4, #2541b2); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #4285f4, #2541b2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } /* Windows 8效果的按鈕樣式 */ .win8-button { background: #4285f4; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } /* Windows 8效果的表格樣式 */ .win8-table { border-collapse: collapse; width: 100%; } .win8-table th, .win8-table td { border: 1px solid #ddd; padding: 8px; text-align: left; } /* Windows 8效果的鏈接樣式 */ .win8-link { color: #4285f4; text-decoration: none; border-bottom: 1px solid #4285f4; transition: border-bottom .3s ease-in-out; } .win8-link:hover { border-bottom: 2px solid #4285f4; }
這些CSS屬性可以幫助你為你的網站添加Windows 8效果的樣式。通過使用這些屬性,你可以為你的網站創建出更加現代化、漂亮的界面。
上一篇css view內容居中
下一篇css video高度