CSS3 box-shadow 属性
生活随笔
收集整理的這篇文章主要介紹了
CSS3 box-shadow 属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
實例
向 div 元素添加 box-shadow：
div { box-shadow:?10px?10px?5px?#888888; }親自試一試
<!DOCTYPE?html> <html> <head> <style>? div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow:?10px?10px?5px?#888888;?/*?老的?Firefox?*/ box-shadow:?10px?10px?5px?#888888; } </style> </head> <body><div></div></body> </html>定義和用法
box-shadow 屬性向框添加一個或多個陰影。
提示：請使用 border-image-* 屬性來構造漂亮的可伸縮按鈕！
| none |
| no |
| CSS3 |
| object.style.boxShadow="10px 10px 5px #888888" |
語法
box-shadow:?h-shadow?v-shadow?blur?spread?color?inset;注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
| h-shadow | 必需。水平陰影的位置。允許負值。 | 測試 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 | 測試 |
| blur | 可選。模糊距離。 | 測試 |
| spread | 可選。陰影的尺寸。 | 測試 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 | 測試 |
| inset | 可選。將外部陰影 (outset) 改為內部陰影。 | 測試 |
親自試一試 - 實例
扔到桌子上面的圖片
本例演示如何創建“寶麗來”圖片，并旋轉圖片。
轉載于:https://my.oschina.net/ajian2014/blog/311771
總結
以上是生活随笔為你收集整理的CSS3 box-shadow 属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【BZOJ】1649: [Usaco20
- 下一篇： 梦到什么预示结婚