How to set css shadow border

How to set the css shadow border: first create a new html file; then create two [

] on this html file to set the shadow border; finally add the style class to these two divs as in , out.

The operating environment of this tutorial: windows10 system, css3 version, DELL G3 computer. This method is suitable for all brands of computers.

How to set the css shadow border:

1. Open the front-end development tool, create a new html file, and then create two

on this html file. Used to set the shadow border, the last two divs add style classes: in, out. As shown in the picture:

Code:

<div class="out">外部边框阴影</div>
<div class="in">内部边框阴影</div>

2. Set the border shadow. Set the size, width and height of these two style classes, and finally use box-shadow to set the shadow border. As shown in the picture:

css code:

<style type="text/css">
.out,.in{
width:300px;
height: 150px;
border:1px solid #BFBFBF;
margin: 20px auto;
}
.out{
box-shadow:0px 0px  10px 5px #aaa;
}
.in{
box-shadow:0px 0px 10px 5px #aaa inset;
}
</style>

3. After saving the html file, open it with a browser to see the effect. As shown in the picture:

4. All codes. You can directly copy all the code to the new html file, paste and save it and open it with a browser to see the effect.

All codes:

<style type="text/css">
.out,.in{
width:300px;
height: 150px;
border:1px solid #BFBFBF;
margin: 20px auto;
}
.out{
box-shadow:0px 0px  10px 5px #aaa;
}
.in{
box-shadow:0px 0px 10px 5px #aaa inset;
}
</style>


<div class="out">外部边框阴影</div>
<div class="in">内部边框阴影</div>

Related tutorial recommendations:CSS video tutorial

The above is the detailed content of How to set css shadow border. For more information, please follow other related articles on the PHP Chinese website!