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

This article is about how to use CSS3 to achieve shadow effects. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. This is html. You can simply have a label or a box.

The code is as follows:

I love exams.

2, css style, using css3 to write the style, feel good.

The code is as follows:

.demo11 {

Border: 1px dashed # f2b

Height: 150px

Width: 250px

Text-align: center

Line-height: 150px

Margin: 0 auto

Font-size: 50px

Color: orange

Text-shadow: 1px 1px rgba (197,223,248), 2px 2px rgba (197,223,248), 3px 3px rgba (197,223,248), 4px 4px rgba (197,223,248), 5px 5px rgba (197,223,248), 6px 6px rgba (197,223,248)

}

Next, let's take a look at the inner shadow.

1. Html style

The code is as follows:

I love test

I love exams.

I love test

I love exams.

2. Simple css style

The code is as follows:

.block {

Font-size: 2em

Font-weight: bold

Margin: 2px

Padding: 2px

Border: solid # AAA 1px

Display: inline-block

}

.black {

Text-shadow: 1px 1px 2px # 888, 000 # 000

}

.white {

Text-shadow: 1px 1px 2px # FFF, 000 # 000

}

Thank you for reading! This is the end of this article on "how to use CSS3 to achieve shadow effect". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.