Home > Article > Web Front-end > How to implement box shadow in css3? Shadow effect in css3
How to add shadow to css images? How to implement box shadow in css3? I believe that many friends who have just come into contact with CSS will have such questions. This chapter will introduce you to the shadow effect in CSS3 and how to implement box shadow in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
CSS3 supports adding shadows to text or elements. Shadow attributes are divided into the following two types:
Text shadow
Box shadow
1: Text shadow
Supports CSS3 to add shadow effects to text. Here is an example of adding a drop shadow effect to text:
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>m.sbmmt.com</h1>
<h2>m.sbmmt.com</h2>
<h3>m.sbmmt.com</h3>
<h4>m.sbmmt.com</h4>
<h5>m.sbmmt.com</h5>
<h6>m.sbmmt.com</h6>
<p>m.sbmmt.com</p>
</body>
</html>The effect is as follows:
Two: Box Shadow
is used to add a drop shadow to an element Shadow effect, the following is an example of adding a shadow effect to an element:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>这是一个带有box-shadow的div元素</div>
</body>
</html>The effect is as follows:
The above is how to implement box shadow in CSS3? A complete introduction to the shadow effect in css3. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.
The above is the detailed content of How to implement box shadow in css3? Shadow effect in css3. For more information, please follow other related articles on the PHP Chinese website!