How to achieve bottom border shadow effect in css

青灯夜游
Release: 2023-01-03 09:27:16
Original
26505 people have browsed it

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.

How to achieve bottom border shadow effect in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css box-shadow property

The box-shadow property adds one or more shadows to the box.

Syntax

box-shadow: h-shadow v-shadow blur spread color inset;
Copy after login

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.

How to achieve bottom border shadow effect in css

【Recommended tutorial: CSS video tutorial

Basic usage

How to achieve bottom border shadow effect in css


box-shadow:2px 2px 5px #000;
Copy after login


box-shadow:0px 0px 10px #000;
Copy after login

Inner Shadow

How to achieve bottom border shadow effect in css


##

box-shadow:inset 2px 2px 5px #000;
Copy after login

Shadow Extended length value

How to achieve bottom border shadow effect in css

##

box-shadow:0px 0px 5px 10px #000;
Copy after login

box-shadow:0px 15px 10px -15px #000;
Copy after login

box-shadow:inset 0px 15px 10px -15px #000;
Copy after login

pseudo-element

::before

and ::afterFun Use the pseudo-elements

::before

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>
Copy after login
.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);
 }
Copy after login
How to achieve bottom border shadow effect in css For more programming related knowledge, please visit: Programming Video

! !

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template