整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
首先查看预览图:
多彩方块
inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all。对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。继承始终来自文档树中的父元素，即使父元素不是包含块。
线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点。
用法：
// 渐变轴从左上角出发并且呈 45 度。
background: linear-gradient(45deg, red, blue);CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
.content-item::after {
content: "";
width: 280px;
height: 280px;
/* 获取其父元素的计算值 */
background: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(20px) brightness(80%);
z-index: -1;
}在该程序中调用了2个函数： blur(20px) brightness(80%);
至于代码中还有其他知识点，也就是 margin 、position 等基础内容了。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴影和背景一致</title>
<style>
.content-item {
position: relative;
width: 260px;
height: 260px;
border-radius: 10px;
/* background: linear-gradient(90deg, #e66465, #9198e5); */
background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
margin: 100px auto;
}
.content-item::after {
content: "";
width: 280px;
height: 280px;
/* 获取其父元素的计算值 */
background: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(20px) brightness(80%);
z-index: -1;
}
</style>
</head>
<body>
<div class="content">
<div class="content-item"></div>
</div>
</body>
</html>css 设置盒子阴影，阴影和背景图保持一致_css filter 阴影色和背景色一致_随忆~的博客-CSDN博客
欢迎收藏该文章！
让我们为投影准备一个简单的HTML元素：
然后添加CSS：
输出结果是三个框，通过调用每个框的ID可以很容易地放置阴影。要添加阴影，让我们将属性box-shadow赋予框1：
我们提供三个参数。前两个参数是offset-x和offset-y。两者都确定投影的位置。相对于元素左上角的位置给出偏移量。偏移x处的正值表示将阴影向右引导，偏移y处的正值表示将阴影向下引导。
第三个参数是所需的阴影颜色。尽管这里我们使用elements <div>，但是属性box-shadow可以应用于所有其他HTML元素。
如果想要阴影看起来更逼真，则可以使用blur-radius参数。此参数将设置我们如何给予阴影模糊效果。让我们将其应用于方框2：
注意第三个参数，该值4px调整应用于投影的模糊半径。
如果要调整阴影的大小，我们可以添加参数spread-radius以使阴影扩大或缩小。让我们8px在框2中添加一个半径扩展：
注意参数的顺序。
我们甚至可以一次将多个阴影组合到一个元素中。让框3应用蓝色和绿色投影：
我们可以用参数制作一个向内的阴影inset。参数inset可以写在属性的开头或结尾box-shadow。以下示例使用elements blockquote。
我们还可以添加一些模糊和散布以增强阴影：
使用properties box-shadow，我们可以为所创建的网页提供阴影，从而可以提供良好的3D照明效果。
享兴趣，传播快乐，增长见闻，留下美好！
亲爱的您，这里是LearningYard新学苑。
今天小编为大家带来话说前端18-盒子阴影以及新盒子属性
，欢迎您的访问。
Share interestsundefined spread happinessundefined increase knowledgeundefined and leave a good legacy!
Dear youundefined this is The LearningYard Academy.
Today Xiaobian brings you the knowledge sharing of Knowledge set | operations research backpack problem
welcome to your visit.
今天我们来讲一讲盒子阴影以及新盒子属性。
首先如其名“阴影”，就像影子一样显示在我们的布局里头。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。文字阴影的属性也是。box-shadow的 其中属性为：
h-shadow：水平方向的阴影，可正可负
v-shadow：竖直方向的阴影，可正可负
Blur：模糊度
Spread：尺寸
Color：颜色
Inset：将阴影设置在内部。
Today, let's talk about box shadows and new box attributes.
First of all, as the name "shadow" shows up in our layout like a shadow. Box shadow has been added in CSS3. We can use the box-shadow property to add a shadow to the box. So is the attribute of the shadow. The attributes of box-shadow are:
H-shadow: horizontal shadow, which can be positive or negative.
V-shadow: vertical shadow, which can be positive or negative.
Blur: ambiguity
Spread: size
Color: color
Inset: Set the shadow inside.
通常为了方便，我们写成简写如box-shadow：4px 4px 4px 4px.....这样写，其中最前面的4px为上面的尺寸，然后顺时针填写，顺序不能乱（上右下左），其中要注意的是默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效。盒子阴影不占用空间，不会影响其他盒子排列。
Usually, for convenience, we write it as a shorthand such as box-shadow：4px 4px 4px 4px 4px, and write it like this, in which the foremost 4px is the above size, and then fill it in clockwise, and the order can't be out of order (top right, bottom left). It should be noted that the default is outset shadow, but you can't write this word, otherwise the shadow will be invalid. Shadows do not occupy space and will not affect the arrangement of other boxes.
文字阴影：text-shadow，与盒子阴影一致，但是没有尺寸和内部的设置。
CSS3盒子模型，CSS3中可以通过box-sizing来指定盒模型，有两个属性值，content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
Text: text-shadow, consistent with box shadow, but without size and internal settings.
CSS3 box model. In CSS3, you can specify the box model by box-sizing. There are two attribute values, content-box and border-box, so that the way we calculate the box size has changed.
盒子计算方式分成两种情况：
box-sizing：content-box(盒子大小) ：width+padding+border （以前默认盒子大小组成）
border-sizing：border-box 盒子大小为width（就是自己设置盒子的宽度大小不会撑大盒子）
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。如果将其设置成宽度一样高就可以使盒子变成圆。也可以分开写：分开写 :
border-top-left-radius、
border-top-right-radius、
border-bottom-right-radius
border-bottom-left-radius
The box calculation method is divided into two cases:
Box-sizing: content-box: width+padding+border (previously composed of the default box size)
Border-sizing：border-box size of the border-box box is width (that is, setting the width of the box by yourself will not enlarge the box)
In CSS3, a new rounded border style has been added, so that our boxes can be rounded. The border-radius attribute is used to set the rounded corner of the outer border of an element. If it is set as high as the width, the box can be made into a circle. You can also write separately: write separately:
border-top-left-radius、
border-top-right-radius、
border-bottom-right-radius
border-bottom-left-radius
今天的分享就到这里了。如果您对今天的文章有什么独特的想法，欢迎评论留言，让我们相约明天，祝您今天过得开心快乐！
That's it for today's sharing. If you have any unique ideas for today's articleundefined please leave a commentundefined let us meet tomorrowundefined I wish you a happy day!
翻译：Google翻译
本文由LearningYard新学苑原创，部分图片文字来自网络，如有侵权请联系。
文字&排版|李仕阳
审核|闫庆红
*请认真填写需求信息，我们会在24小时内与您取得联系。
