YouTipHTML DOM Style boxShadow Property
-- Learning is not just about technology, but also about dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
JavaScript Reference Manual
JavaScript Objects
- JavaScript Array Object
- JavaScript Boolean Object
- JavaScript Date Object
- JavaScript Math Object
- JavaScript Number Object
- JavaScript String Object
- JavaScript RegExp Object
- JavaScript Global Properties/Functions
- JavaScript Operators
- JavaScript Error
Browser Objects
DOM Objects
- HTML DOM Document Object
- HTML DOM Element Object
- HTML DOM Attribute Object
- HTML DOM Event Object
- HTML DOM Console Object
- CSSStyleDeclaration Object
- DOM HTMLCollection
HTML Objects
- <a>
- <area>
- <audio>
- <base>
- <blockquote>
- <body>
- <button>
- <canvas>
- <col>
- <colgroup>
- <datalist>
- <del>
- <details>
- <dialog>
- <embed>
- <fieldset>
- <form>
- <iframe>
- <frameset >
- <img>
- <ins>
- <input> - button
- <input> - checkbox
- <input> - color
- <input> - date
- <input> - datetime
- <input> - datetime-local
- <input> - email
- <input> - file
- <input> - hidden
- <input> - image
- <input> - month
- <input> - number
- <input> - range
- <input> - password
- <input> - radio
- <input> - reset
- <input> - search
- <input> - submit
- <input> - text
- <input> - time
- <input> - url
- <input> - week
- <keygen>
- <link>
- <label>
- <legend>
- <li>
- <map>
- <menu>
- <menuItem>
- <meta>
- <meter>
- <object>
- <ol>
- <optgroup>
- <option>
- <param>
- <progress>
- <q>
- <script>
- <select>
- <source>
- <style>
- <table>
- <td>
- <th>
- <tr>
- <textarea>
- <title>
- <time>
- <track>
- <video>
Style boxShadow Property
Example
Add a shadow to a div element:
document.getElementById("myDIV").style.boxShadow="10px 20px 30px blue";Definition and Usage
The boxShadow property sets or returns the drop shadow of an element.
Browser Support
The boxShadow property is supported in IE9+, Firefox, Chrome, Opera, and Safari 5.1.1.
Syntax
Get the boxShadow property:
_object_.style.boxShadowSet the boxShadow property:
_object_.style.boxShadow="none|_h-shadow v-shadow blur spread color_|inset|initial|inherit"Note: The boxShadow property adds one or more drop shadows to the box. The property is a comma-separated list of shadows, each shadow defined by 2-4 length values, an optional color value, and an optional inset keyword. Omitted lengths default to 0.
Property Values
| Value | Description |
|---|---|
| none | Default value. No shadow is displayed. |
| _h-shadow_ | Required. The position of the horizontal shadow. Negative values are allowed. |
| _v-shadow_ | Required. The position of the vertical shadow. Negative values are allowed. |
| _blur_ | Optional. The blur distance. |
| _spread_ | Optional. The size of the shadow. |
| _color_ | Optional. The color of the shadow. The default value is black. For a complete list of possible color values, see CSS Color Values. Note: In Safari (on PC), the color parameter is required. If you do not specify a color, no shadow is displayed. |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow. |
| initial | Sets this property to its default value. See initial. |
| inherit | Inherits this property from its parent element. See inherit. |
Technical Details
| Default Value: | none |
|---|---|
| Return Value: | A string, representing the box-shadow property of the element. |
| CSS Version: | CSS3 |
Related Articles
CSS Reference: box-shadow Property