Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow
. Here's how.
我们可以使用CSS属性box-shadow
将阴影添加到任何HTML元素。 这是如何做。
添加基本投影 (Adding a Basic Drop Shadow)
Let's first set up some basic HTML elements to add our drop shadows to:
让我们首先设置一些基本HTML元素,以将阴影添加到:
<div id="box1" class="box">Box1</div>
<div id="box2" class="box">Box2</div>
<div id="box3" class="box">Box3</div>
Then add some basic CSS:
然后添加一些基本CSS:
p {padding: 10px;
}
.box {padding: 20px;width: 50%;margin: 30px auto;background: #000;color: #fff;
}
The result is just three black boxes that will be easy for us to add drop shadows to by calling their unique id's:
结果只有三个黑匣子,我们可以通过调用它们的唯一ID轻松添加阴影:
To add a basic drop shadow, let's use the box-shadow
property on the Box 1:
要添加基本的阴影,请使用Box 1上的box-shadow
属性:
/* offset-x | offset-y | color */
#box1 {box-shadow: 6px 12px yellow;
}
We have 3 parameters here. The first 2 are, respectively, the x-offset and y-offset. They set the location of the drop shadow.
这里有3个参数。 前两个分别是x偏移和y偏移。 他们设置阴影的位置。
The offset is relative to the origin, which in HTML is always the top left corner of an element. A positive x-offset will move the shadow to the right, and a positive y-offset will move the shadow downwards.
偏移量是相对于原点的,原点在HTML中始终是元素的左上角。 正x偏移将阴影向右移动,正y偏移将阴影向下移动。
The third parameter is the color of your drop shadow.
第三个参数是投影的颜色。
Keep in mind that although we used <div>
elements here, the box-shadow
property can be applied to any other HTML element as well.
请记住,尽管我们在这里使用了<div>
元素,但是box-shadow
属性也可以应用于任何其他HTML元素。
添加模糊半径 (Adding a Blur Radius)
If we want the shadow to look a little more realistic, we will want to experiment with the blur-radius
parameter.
如果我们希望阴影看起来更真实一些,我们将尝试使用blur-radius
参数。
This parameter controls how much to blur the shadow such that it becomes bigger and lighter. Let's apply it to Box 2:
此参数控制模糊程度以使其变大和变亮的程度。 让我们将其应用于方框2:
/* offset-x | offset-y | blur-radius | color */
#box2 {box-shadow: 6px 12px 4px red;
}
The value of 4px sets the radius of the blur to apply to our drop shadow.
4px的值设置模糊的半径以应用于我们的阴影。
添加传播半径 (Adding a Spread Radius)
If we want to control the size of the shadow, we can use the spread-radius
parameter which controls how much a shadow grows or shrinks.
如果要控制阴影的大小,则可以使用spread-radius
参数来控制阴影的增长或收缩程度。
Let's add a spread radius of 8px to Box 2:
让我们在框2中添加一个8px的展开半径:
/* offset-x | offset-y | blur-radius | spread-radius | color */
#box2 {box-shadow: 6px 12px 4px 8px red;
}
Remember the order of these parameters!
记住这些参数的顺序!
在单个属性中组合多个阴影 (Combining Multiple Shadows in a Single Property)
If we want to get fancy, we can add multiple drop shadows to an element using a single box-shadow
property.
如果想花哨的话,可以使用单个box-shadow
属性为元素添加多个阴影。
Let's do that with Box 3 by simultaneously adding a blue and green drop shadow:
让我们在方框3中同时添加一个蓝色和绿色的阴影来做到这一点:
/* Any number of shadows, separated by commas */
#box3 {box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green;
}
奖励:创建插入阴影 (Bonus: Create an Inset Shadow)
While it will not create a drop shadow, the inset
parameter can also be used with the box-shadow
property.
尽管不会创建阴影,但inset
参数也可以与box-shadow
属性一起使用。
As the name suggests, this parameter creates an inset shadow (i.e. shadow inside a box).
顾名思义,此参数将创建插入阴影(即,框内的阴影)。
The inset
parameter can be placed either at the beginning or the end of the box-shadow
property. Here we demonstrate its use with a blockquote
element.
可以将inset
参数放在box-shadow
属性的开头或结尾。 在这里,我们通过blockquote
元素演示其用法。
HTML:
HTML:
<blockquote><q>The key to success is to start before you're ready.</q><p>— Marie Forleo</p>
</blockquote>
CSS:
CSS:
blockquote {width: 50%;margin: 50px auto;padding: 20px;font-size: 24px;box-shadow: inset 10px 5px black;
}
Of course you can add some blur and spread to enhance the shadow, or even multiple shadows:
当然,您可以添加一些模糊和散布以增强阴影,甚至多个阴影:
box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
With the box-shadow
property, we can easily make elements on a web page stand out to create a nice 3D lighting effect.
使用box-shadow
属性,我们可以轻松地使网页上的元素突出以创建漂亮的3D照明效果。
If you want to do some experimenting yourself, here's a code pen I created with the examples used in this tutorial.
如果您想做一些实验,请使用我在本教程中使用的示例创建的一支代码笔 。
Play around and see what you can come up with!
玩转,看看你能想到什么!
是否想查看更多Web开发技巧和知识? (Want to See More Web Development Tips and Knowledge?)
Subscribe to my weekly newsletter
订阅我的每周新闻
Visit my blog at 1000 Mile World
访问我在1000 Mile World上的博客
Follow me on Twitter
在Twitter上关注我
翻译自: https://www.freecodecamp.org/news/css-tutorial-drop-shadow/
Box Shadow CSS教程–如何向任何HTML元素添加投影相关推荐
- CSS - 基于before及after伪元素添加字符
前言 就像在电视剧<迷离时空>(The Twilight Zone)中遗失的一集一样,CSS提供的新属性赋予了使用者在内容中添加伪标记的能力.可能听起来会有点奇怪,但这种方法却有着众多的应 ...
- css给非最后一个子元素添加样式
要使用CSS选择元素中除最后一个之外的所有子元素,可以使用使用:not和:last-child选择器. 语法: element:not(:last-child) { // CSS样式 } :not(s ...
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
- HTML5+CSS笔记教程(CSS教程篇)
我所看的B站教程:最新最全HTML5-CSS3教程_哔哩哔哩_bilibili 官方文档:Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Spe ...
- css教程之列表属性
列表属性(相关css教程) CSS属性: 7.列表属性: 这里的属性用来描述列表(list)的一系列属性. list-style-type属性描述用于列表每一项前使用的符号: 属性名称: 'lis ...
- word文档css格式化,css教程 word版.doc
css教程 word版 CSS教程 CSS简介 CSS语法 CSS字体属性(font) CSS常用文本属性 CSS背景属性 CSS边框属性(border) CSS边距属性(margin) CSS间隙属 ...
- Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
- css教程–十步学会用css建站(全)
css教程–十步学会用css建站(全) 转载于:https://www.cnblogs.com/reommmm/articles/1195548.html
最新文章
- cudnn.h: No such file or directory
- 处理器不同模式下寄存器
- HTML5教程:1.1 迎接新的Web时代
- linux中sh和bash的区别
- oracle 九阴真精,《九阴真经》真的很强吗?其实它杂而不精,顶级高手都不愿意用...
- 25%的CPU利用率也能够让一台笔记本如此狼狈 (小红伞)
- TDL信道模型和CDL信道模型
- 自然语言分析包NLTK安装及入门
- 使用Fiddler抓取websocket包-Android
- 【SDOI2009】【BZOJ1875】HH去散步
- 准大二生的暑期自学安排
- CSharp + OpenCvSharp实现医学图像拼接
- JAVA高级面试题汇总及答案
- html表格美化模板,JavaScript + CSS 美化出的条纹表格样式
- 2023必须收藏的16个Python接单平台,做私活爽歪歪!附100个爬虫源码,拿去吧你
- 基于逃逸鸟搜索算法的函数寻优算法
- 助力智慧医疗,解析i.MX8MM在麻醉系统中的应用方案
- 【js的window.onload和jquery的.ready()什么区别】
- AI智慧工地视频分析系统 yolov7
- 【人工智能】什么是数据标注?