圓角CSS陰影代碼可以讓網頁更加美觀,下面是代碼實例:
/* 圓角 */ border-radius: 10px; /* 陰影 */ box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
上述代碼中,border-radius屬性用來設置圓角的大小,它的值越大,圓角就越明顯。
而box-shadow屬性則用來添加陰影效果。它有四個值,前三個分別是水平偏移、垂直偏移和模糊半徑,最后一個表示陰影的透明度。
通過組合這兩個屬性,可以實現不同形狀的陰影效果,例如圓形陰影、卡片式陰影等。
需要注意的是,為了兼容各種瀏覽器,可以使用廠商前綴來實現效果,例如:
/* 圓角 */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* 陰影 */ -webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.3); box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
這樣就可以確保在各種瀏覽器上都能夠正常顯示。
上一篇mysql 獲取 編碼
下一篇圓角的屬性值css