CSS3+border-shadow是一種常用的CSS3屬性,可以使邊框和陰影變得更加美觀、豐富。在網頁設計中常常會使用這種屬性,今天就來介紹一下如何使用CSS3+border-shadow來實現各種邊框和陰影效果。
/* 實現普通陰影效果 */ .box { box-shadow: 2px 2px 4px #888888; } /* 實現邊框陰影效果 */ .box { box-shadow: 0 0 0 5px #000; } /* 實現多邊框效果 */ .box { box-shadow: 0 0 0 5px #000,0 0 0 10px blue,0 0 0 15px red; } /* 實現圓形陰影效果 */ .box { box-shadow: 0 0 30px rgba(0,0,0,0.5); border-radius: 50%; } /* 實現三角形邊框效果 */ .triangle { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent transparent #333 transparent; transform: rotate(45deg); box-shadow: -3px 3px 3px #888888; }
通過使用這些CSS3+border-shadow屬性可以實現各種不同的邊框和陰影效果,讓你的網頁設計更加出色!