How to use CSS3 to achieve Shadow effect
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!
