How to set object box shadow and picture shadow in CSS3
This article mainly explains "how to set object box shadow and picture shadow in CSS3". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "CSS3 how to set object box shadow and picture shadow"!
CSS style words and usage Grammar
1. Box shadow style word: box-shadow
2. Grammar
P {box-shadow:001px#000inset;}
Represents the border spacing 0 to the left and 0 above the 1px shadow range shadow color is black (# 000), there is inset represents the box shadow, without inset represents the box shadow.
Note:
Box-shadow:0px0px1px#000
When the first value is 0, the shadow of the left and right border is in the 1px range.
The first value is a positive integer that represents the shadow of the left border
The first value is a negative integer that represents the shadow of the right border
The same principle
The second value 0 represents the shadow of the upper and lower borders.
The second value is a positive integer indicating how far the 1px shadow is from the upper border.
The first value is a negative integer that represents the shadow setting of the lower border
3. Browser compatibility diagram
Wechat screenshot _ 20181016140609.png browser compatibility list
II. PCSS5 case
PCSS5 sets inner shadow and outer shadow for p box and picture IMG respectively as examples.
1. Case HTML code
Object Shadow online demonstration DIVCSS5VIP
Box object Shadow Test
Shadow inside DIV box
Picture object Shadow Test
2. Case CSS code
.box {box-shadow:5px2px6px#000inset;width:300px;height:80px;margin:0auto}
.box2img {box-shadow:5px2px6px#000}
Set the shadow effect inside the p object and the shadow effect outside the picture respectively
At this point, I believe you have a deeper understanding of "how to set object box shadow and picture shadow in CSS3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
