Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.