In CSS, you can use the box-shadow attribute to achieve the lower border shadow effect, the syntax is "box-shadow:0px 15px 10px -15px #000;". The box-shadow property adds one or more shadows to the box. Use a comma-separated list of shadows.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The box-shadow property adds one or more shadows to the box.
Syntax
box-shadow: h-shadow v-shadow blur spread color inset;
Comments: box-shadow adds one or more shadows to the box. This property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and the optional inset keyword. The value for omitted length is 0.
【Recommended tutorial: CSS video tutorial】
box-shadow:2px 2px 5px #000;
box-shadow:0px 0px 10px #000;
##
box-shadow:inset 2px 2px 5px #000;
##
box-shadow:0px 0px 5px 10px #000;
box-shadow:0px 15px 10px -15px #000;
box-shadow:inset 0px 15px 10px -15px #000;
::after
Fun
Use the pseudo-elements and ::after
, We can create very realistic shadow effects that only pictures can achieve. Let me look at an example:
<div class="box11 shadow"></div>
.box11 { width: 300px; height: 100px; background: #ccc; border-radius: 10px; margin: 10px; } .shadow { position: relative; max-width: 270px; box-shadow: 0px 1px 4px rgba(0,0,0,0.3), 0px 0px 20px rgba(0,0,0,0.1) inset; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; } .shadow::before, .shadow::after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); } .shadow::after{ right:10px; left:auto; transform:rotate(3deg); }
The above is the detailed content of How to achieve bottom border shadow effect in css. For more information, please follow other related articles on the PHP Chinese website!