Example code for Html layered box-shadow effect

insert image description here

First, let’s take a look at the picture: Today we will create this effect!

insert image description here

Actually, it’s nothing. I just want to share that when you are making web pages, you often encounter the problem of making navigation bars. You may feel that your navigation bar always lacks a three-dimensional feeling. Let’s take a look at it today!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			body{
				margin: 0;
			}
			.clearfix {
			  overflow:auto;
			}
			.shadow_box{
				box-shadow: 0px 3px 10px 1px #888888;
			}
			div.sticky{
				
				position: sticky;
				top: 0;
				
				background:azure;
				text-align: center;
				
				
			}
			.img1{
				float: left;
				clear: both;
				margin-left:100px;
				opacity: 0.8;
				overflow:auto;
				
			}
			
			ul{
				list-style-type: 0;
				margin: 0;
				padding: 0;
				width: 7%;
				height: 100%;
				background-color:rgb(147, 171, 235);
				position:fixed;
				overflow:auto;
				border-radius: 25px;
				
				
			}
			li a{
				display: block;
				color:#000;
				padding: 8px 16px;
				text-decoration: none;
				font-family:"bold";
				
			}
			li:hover{
				background-color: #555;
				color: white;
				
			}
			
		</style>
		<title>XR official website</title>
	</head>
	
	
	<body>
		
		<div class="sticky clearfix shadow_box">
			<img class="img1" src="img/4.png" width="60px" height="60px" />
			
		</div>
		<div>
			<ul>
				<li><a href="index.html">Core Technology</a></li>
				<li><a href="index.html">Party and Government Section</a></li>
				<li><a href="index.html">Business Status</a></li>
				<li><a href="index.html">Future Development</a></li>
				<li><a href="index.html">Contact Us</a></li>
			</ul>
		</div>
		<div style="padding-bottom: 2000px;"></div>
		
	</body>
</html>

Directly on the complete code, this is also everyone's favorite way, no more procrastination, we mainly look at this

insert image description here

This is the "culprit" of the shadow effect. Because I defined box-shadow and then specified the relevant parameters, I can set it like this. A friend asked, what does this parameter mean and how do I know? It’s okay, I’ll tell you with a picture!

insert image description here

That's all there is to box-shadow. I believe you can set it up. If you still don’t know how, you can leave me a message and I will help you set it up! Thanks for your support!

This is the end of this article about Html layered box-shadow effect. For more related HTML layered box-shadow content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:

>>: 4 functions implemented by the transform attribute in CSS3

Detailed explanation of the buffer pool in MySQL

Example code for Html layered box-shadow effect

Detailed explanation of the buffer pool in MySQL

Mysql SQL statement operation to add or modify primary key

WeChat Mini Program uses simultaneous interpretation to implement speech recognition

nuxt.js multiple environment variable configuration

Web Design Experience: Self-righteous Web Designers

CentOS 7.x docker uses overlay2 storage method

The One-Hand Rule of WEB2.0

How to configure Http, Https, WS, and WSS in Nginx

Solution to MySQL master-slave delay problem

Solution to Linux CentOS 6.5 ifconfig cannot query IP

Recommend

How to use the Linux nl command

A brief discussion on the pitfalls and solutions of the new features of MySQL 8.0 (summary)

Introduction to Linux compression and decompression commands

Public free STUN servers

Solve the problem of qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in Qt under Ubuntu 18.04

How to move mysql5.7.19 data storage location in Centos7

Example of removing json backslash in php

Echarts legend component properties and source code

Detailed explanation of binary and varbinary data types in MySQL

Linux jdk installation and environment variable configuration tutorial (jdk-8u144-linux-x64.tar.gz)

Example code for implementing the "plus sign" effect with CSS

Implementation of the list-style-type attribute in front of CSS ordered or unordered lists

Vue realizes the progress bar change effect

A brief discussion on browser compatibility issues in JavaScript

Mini Programs use Mini Program Cloud to implement WeChat payment functions