What does box-shadow mean in css3-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What does box-shadow mean in css3

青灯夜游

Feb 28, 2022 pm 04:50 PM

box-shadowcss3

In CSS3, "box-shadow" means "box shadow", which is a new attribute that adds border shadow to elements; this attribute can add one or more shadows to the box, the syntax "box -shadow: horizontal shadow vertical shadow blur distance size color inset;".

What does box-shadow mean in css3

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

What does box-shadow mean in css3

In CSS3, "box-shadow" means "box shadow", which is a new attribute that adds border shadow to elements.

What does box-shadow mean in css3

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

Note: Use border-image-* attributes to construct beautiful scalable buttons!

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

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.

h-shadow Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow Required. The position of the vertical shadow. Negative values are allowed.
blur Optional. Fuzzy distance.
spread Optional. The size of the shadow.
color Optional. The color of the shadow. See CSS color values.
inset Optional. Change the outer shadow (outset) to an inner shadow.

The following are a few small tests I did for everyone:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Running results:
What does box-shadow mean in css3

We also practiced Learn how to create "polaroid" photos and rotate pictures. For example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
	margin:30px;
	background-color:#E9E9E9;
}

div.polaroid
{
	width:294px;
	padding:10px 10px 20px 10px;
	border:1px solid #BFBFBF;
	background-color:white;
	/* Add box-shadow */
	box-shadow:2px 2px 3px #aaaaaa;
}

div.rotate_left
{
	float:left;
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
	transform:rotate(7deg);
}

div.rotate_right
{
	float:left;
	-ms-transform:rotate(-8deg); /* IE 9 */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	transform:rotate(-8deg);
}
</style>
</head>
<body>

<div class="polaroid rotate_left">
<img src="/static/imghwm/default1.png"  data-src="pulpitrock.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>

<div class="polaroid rotate_right">
<img src="/static/imghwm/default1.png"  data-src="cinqueterre.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>


</body>
</html>

The running result is as follows:

What does box-shadow mean in css3

·There are many kinds of box-shadow shadows, such as: inner shadow, outer shadow, three-sided shadow, and two-sided shadow Shadow, single-sided shadow, western stroke...,

means:

What does box-shadow mean in css3 For example:

<div class="flex">
  <div class="flex-item">
    <h3 id="内阴影示例">内阴影示例</h3>
    <div class="box boxshadow1"></div>
  </div>
  <div class="flex-item">
    <h3 id="边内影示例">3边内影示例</h3>
    <div class="box boxshadow2"></div>
  </div>
  <div class="flex-item">
    <h3 id="外阴影示例">外阴影示例</h3>
    <div class="box boxshadow3"></div>
  </div>
  <div class="flex-item">
    <h3 id="右下外阴影示例">右下外阴影示例</h3>
    <div class="box boxshadow4"></div>
  </div>
  <div class="flex-item">
    <h3 id="扩大阴影示例">扩大阴影示例</h3>
    <div class="box boxshadow5"></div>
  </div>
  <div class="flex-item">
    <h3 id="半透明阴影色示例">半透明阴影色示例</h3>
    <div class="box boxshadow6"></div>
  </div>
</div>

css:

.flex{display:flex;flex-wrap:wrap;} 
.flex-item{margin-right:30px;}

.box {  background-color: #CCCCCC; border-radius:10px; width: 200px; height: 200px;  }
.boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; }
.boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; }
.boxshadow3{box-shadow:0 0 10px #000;}
.boxshadow4{box-shadow:2px 2px 5px #000;}
.boxshadow5{box-shadow:0 0 5px 15px #000;}
.boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);}

Running results:

What does box-shadow mean in css3

(Learning video sharing: css video tutorial, web front-end Getting Started Tutorial)

The above is the detailed content of What does box-shadow mean in css3. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

Keys in React: A Deep Dive into Performance Optimization TechniquesMay 01, 2025 am 12:25 AM

KeysinReactarecrucialforoptimizingperformancebyaidinginefficientlistupdates.1)Usekeystoidentifyandtracklistelements.2)Avoidusingarrayindicesaskeystopreventperformanceissues.3)Choosestableidentifierslikeitem.idtomaintaincomponentstateandimproveperform

What are keys in React?May 01, 2025 am 12:25 AM

Reactkeysareuniqueidentifiersusedwhenrenderingliststoimprovereconciliationefficiency.1)TheyhelpReacttrackchangesinlistitems,2)usingstableanduniqueidentifierslikeitemIDsisrecommended,3)avoidusingarrayindicesaskeystopreventissueswithreordering,and4)ens

The Importance of Unique Keys in React: Avoiding Common PitfallsMay 01, 2025 am 12:19 AM

UniquekeysarecrucialinReactforoptimizingrenderingandmaintainingcomponentstateintegrity.1)Useanaturaluniqueidentifierfromyourdataifavailable.2)Ifnonaturalidentifierexists,generateauniquekeyusingalibrarylikeuuid.3)Avoidusingarrayindicesaskeys,especiall

Using Indexes as Keys in React: When It's Acceptable and When It's NotMay 01, 2025 am 12:17 AM

Using indexes as keys is acceptable in React, but only if the order of list items is unchanged and not dynamically added or deleted; otherwise, a stable and unique identifier should be used as the keys. 1) It is OK to use index as key in a static list (download menu option). 2) If list items can be reordered, added or deleted, using indexes will lead to state loss and unexpected behavior. 3) Always use the unique ID of the data or the generated identifier (such as UUID) as the key to ensure that React correctly updates the DOM and maintains component status.

React's JSX Syntax: A Developer-Friendly Approach to UI DesignMay 01, 2025 am 12:13 AM

JSXisspecialbecauseitblendsHTMLwithJavaScript,enablingcomponent-basedUIdesign.1)ItallowsembeddingJavaScriptinHTML-likesyntax,enhancingUIdesignandlogicintegration.2)JSXpromotesamodularapproachwithreusablecomponents,improvingcodemaintainabilityandflexi

What type of audio files can be played using HTML5?Apr 30, 2025 pm 02:59 PM

The article discusses HTML5 audio formats and cross-browser compatibility. It covers MP3, WAV, OGG, AAC, and WebM, and suggests using multiple sources and fallbacks for broader accessibility.

Difference between SVG and Canvas HTML5 element?Apr 30, 2025 pm 02:58 PM

SVG and Canvas are HTML5 elements for web graphics. SVG, being vector-based, excels in scalability and interactivity, while Canvas, pixel-based, is better for performance-intensive applications like games.

Is drag and drop possible using HTML5 and how?Apr 30, 2025 pm 02:57 PM

HTML5 enables drag and drop with specific events and attributes, allowing customization but facing browser compatibility issues on older versions and mobile devices.

See all articles