整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
随着Web技术的不断演进，CSS3以其强大的视觉表现力，赋予网页设计无限可能。本文将深入剖析CSS3中的三大视觉魔法工具——渐变、阴影与遮罩技术，通过详尽的理论讲解和丰富的实例演示，助您掌握这些技巧，打造出令人眼前一亮的网页视觉盛宴。
1. 线性渐变：平滑过渡，简约而不简单
css
background: linear-gradient(to right, #ff6b6b, #ff9595);
上述代码创建了一个从左至右，由#ff6b6b渐变到#ff9595的线性渐变背景。您可以调整方向（如`to bottom`、`45deg`等）、添加更多颜色停止点来丰富渐变效果。
2. 径向渐变：聚焦视觉中心，营造立体感
css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);
此例中，我们创建了一个以元素中心为圆心，从#f7f7f7渐变到#dcdcdc的圆形径向渐变背景。通过调整形状（如`ellipse`）、大小（如`closest-side`）和位置（如`top left`），可以灵活定制径向渐变样式。
1. 盒子阴影（Box Shadow）：轻松实现三维效果
css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
上述代码为元素添加了一个向右下偏移2px、模糊半径为8px、颜色为rgba(0, 0, 0, 0.3)的阴影。理解盒阴影的基本参数（水平偏移、垂直偏移、模糊半径、扩散半径、颜色）并灵活运用，即可创造出丰富的阴影效果。
2. 文本阴影（Text Shadow）：让文字跃然纸上
css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.½), -1px -1px 2px rgba(255, 255, 255, 0.5);
此处为文本设置了两个阴影：一个向右下偏移、颜色较深的阴影，以及一个向左上偏移、颜色较浅的阴影，形成微妙的浮雕效果。通过叠加多个阴影、调整参数，您可以创作出各种独特的文本样式。
1. CSS Mask：精细裁剪，展现独特视界
css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);
该代码为元素应用了一个从左至右的线性渐变遮罩，使得元素左侧和右侧各有一半区域透明。您还可以使用`mask-mode`、`mask-repeat`、`mask-position`等属性进一步调整遮罩行为。
2. CSS Clip Path：创意裁剪，打破常规布局
css
clip-path: polygon(0 0, 100% 0, .png);
上述代码使用多边形裁剪路径，将元素顶部裁剪成尖角形状。您还可以使用椭圆、圆形、内切/外切矩形等多种路径类型，甚至借助SVG路径实现更为复杂的裁剪效果。
案例一：动态渐变按钮
css
/* 定义CSS变量 */
:root {
--start-color: #ff6b6b;
--end-color: #ff9595;
}
.button {
background: linear-gradient(to right, var(--start-color), var(--end-color));
transition: background 0.3s ease-in-out;
}
.button:hover,
.button:focus {
--start-color: #ff9595;
--end-color: #ff6b6b;
}
利用CSS变量、伪类和动画，创建一个点击时背景渐变颜色动态变化的按钮：
案例二：悬浮卡片与阴影交互
css
.card {
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.card:hover {
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}
结合盒子阴影与:hover伪类，实现鼠标悬停时卡片阴影增强的交互效果：
案例三：遮罩叠加文字特效
css
.image-overlay {
background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
background-blend-mode: multiply;
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
利用遮罩与多重背景，创造出文字在图片上淡入淡出的特效：
结语
CSS3的渐变、阴影与遮罩技术，如同网页设计的调色板、光影魔术师和剪刀手，赋予网页视觉表现无尽的可能性。通过深入理解并熟练运用这些技术，您将能打造出既美观又富有创意的网页界面，为用户带来极致的视觉体验。持续探索、实践与创新，您的每一个作品都将成为Web世界中的一道独特风景。
这里设置了基本的表单样式，外层用了div进行包裹，重点是运用了两个i元素在后期通过css样式勾画出一条线没在聚焦文本框的时候线会过度成一个对话框，掩盖掉原本的对话框的形式，很好的一个创意
<body>
<!-- 搭建基本结构 -->
<div class="box">
<span class="borderLine"></span>
<!-- 用form提交 -->
<form>
<h2>Sign In</h2>
<div class="inputBox">
<!-- required表示文本框必须输入内容,否则则在提交的时候默认提示 -->
<input type="text" required>
<!-- 用一个i元素勾画出来一条线，改变其高度形成一个输入框 -->
<span>User name</span><i></i>
</div>
<div class="inputBox">
<input type="password" required>
<!-- 用一个i元素勾画出来一条线，改变其高度形成一个密码框 -->
<span>Password</span><i></i>
</div>
<div class="links">
<!-- 用两个a标签写忘记密码和注册按钮 -->
<a href="#">Forget password</a><a href="#">Sing up</a>
</div>
<input type="submit" value="Login">
</form>
</div>
这里的对整个body进行了设置，并且清除了默认样式，设置了一些默认样式，将整个body设置为弹性盒并且居中显示，运用了minhight样式 设置 min-height: 100vh; 的元素的高度将至少为浏览器窗口的高度，对最外层的box样式进行了超出部分隐藏，用于后期宣传时候超出盒子部分的隐藏掉，从而显示出来线条流动的效果，同时也对form表单进行了进一步的设置，通过zindx涉及了垂直层叠的顺序显示，且通过弹性盒子的改变主轴方向为y轴
* {
/* 清除默认样式 */
margin: 0;
padding: 0;
font-size: 黑体;
/* 设置成ie盒 */
box-sizing: border-box;
}
body {
/* 对整整体进行设置 设置为弹性盒子,并且居中 */
display: flex;
justify-content: center;
align-items: center;
/* min-height 属性设置元素的最小高度为 100vh。vh 是视口高度的单位，1vh 等于浏览器窗口的高度的 1%。这意味着，设置 min-height: 100vh; 的元素的高度将至少为浏览器窗口的高度 底色设置为黑色*/
min-height: 100vh;
background: #222;
}
.box {
/* 对整个盒子进行设置 超出部分隐藏用于最后的效果,并且相对定位相对于原本的位置进行定位,以便于子元素根据父元素的位置
进行定位 子决父向 */
overflow: hidden;
position: relative;
width: 380px;
height: 420px;
background: #1c1c1c;
border-radius: 8px;
}
/* 对from进行样式设置 进行绝对定位,相对于上面的box进行定位, */
.box form {
position: absolute;
inset: 4px;/*定位元素边框或内边距的简写属性 设置所有方向的边距为4px 没啥用 */
background: #222;
padding: 50px 40px;
border-radius: 8px;
z-index: 2; /* 用于控制元素在垂直层叠顺序中的显示级别 较大的值表示元素在堆叠顺序中更靠前，
即位于上层；较小的值表示元素在堆叠顺序中更靠后，即位于下层。 */
display: flex;
flex-direction: column;/*flex换轴 容器内的元素将在垂直方向上从上至下排列，
主轴方向为垂直方向。这意味着元素将在垂直方向上按照从上到下的顺序进行布局，而不是默认的水平方向。*/}
这里呢对表单的各个部件进行了样式的设置，添加了聚焦时候的动画效果，值得一提的是运用了letter-spacing: 0.1em;/* 制文本中字符之间的间距为0.1em 属性应用于
、 以及 元素*/ 同时对文本框进行了定位，设置了位置其中将input标签的背景颜色隐藏了起来是为了后面更好的通过html中i元素勾画出的那条线来撑起来形成文本框做准备，同时也设计了zindex优先级的问题，对login按钮添加了动画样式
.box form h2 {
color: #fff;
font-weight: 500;
text-align: center;/*加粗文字居中 */
letter-spacing: 0.1em;/* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/
}
.box form .inputBox {
/* 相对于form进行定位 */
position: relative;
width: 300px;
margin-top: 35px;
}
.box form .inputBox input {
/* 相对于.inputBox进行定位 */
position: relative;
width: 100%;
padding: 20px 10px 10px;
background: transparent; /*input文本框隐藏起来方便用li标签的那根线撑起来形成文本框仅仅只是展示效果,实际上任然是input文本框 */
outline: none;
border: none;
box-shadow: none; /*阴影设置*/
color: #23242a;
font-size: 1em;
letter-spacing: 0.05em;/* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/
z-index: 10; /*优先级设置 */
transition: 0.3s;
}
.box form .inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
pointer-events: none;
color: #8f8f8f;
font-size: 1em;
letter-spacing: 0.05em;
transition: 0.5s;/*动画过渡*/
}
.box form .inputBox input:valid~span,/*选择器将选择所有紧跟在有效输入字段后的 <span> 元素。*/
.box form .inputBox input:focus~span/*用于选中处于焦点状态的输入字段之后的所有 <span> 元素。*/
{
color: #fff;
font-size: 0.75em;
transform: translateY(-34px); /*向上移动34个像素*/
}
这里呢，通过定位设置好i元素那条线的位置，后将这条白线在聚焦文本框的时候进行高度拉伸，形成效果上变成白色的对话框，要注意，并不是白线拉高变成了对话框，而是白线拉高盖住了原本的对话框，使得视觉上形成了白线变成了对话框，实际上仍然是原来的对话框，仅仅是效果而已
.box form .inputBox i {
position: absolute; /*相对于inputBox定位,并且在最左和最下面 */
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #fff;
border-radius: 5px;
overflow: hidden;
transition: 0.5s;
pointer-events: none;
}
.box form .inputBox input:valid~i,
.box form .inputBox input:focus~i {
height: 42px;
}
这里针对按钮的样式进行了优化，并且设计了忘记密码这些鼠标样式，
/* 设置flex a链接的样式 */
.box form .links {
display: flex;
justify-content: space-between;/*容器内的 flex 项目在水平方向上均匀分布，
项目之间的间距相等，并且最左侧和最右侧的项目紧贴容器的边界。*/
}
.box form .links a {
margin: 10px 0;
font-size: 0.75em;
color: #8f8f8f;
}
/* 移动上去改变颜色 */
.box form .links a:hover,
.box form .links a:nth-child(2) {
color: #fff;
}
/* 按钮样式 */
.box form input[type='submit'] {
padding: 9px 25px;
background: #fff;
cursor: pointer; /*设置鼠标样式*/
font-size: 0.9em;
border-radius: 5px;
font-weight: 600;
width: 80%;
margin-top: 10px;
margin-left: 30px;
}
/* 登录按钮点击时透明度为80% */
.box form input[type='submit']:active {
opacity: 0.8;
}
/* 添加流光动画 */
.borderLine {
position: absolute;
top: 0;
inset: 0;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
因为在上面针对zindex的层级叠加以及外层box盒子超出的部分进行了隐藏，所以你可以看到如下的效果
.box::before,
.box::after,
.borderLine::before,
.borderLine::after{
/* 对box和borderlin前后插入伪元素 为元素content必修有尽管它可以是空 */
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
/* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡，具体颜色值会根据动画来变化。 */
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);
z-index: 1;/*设置伪元素的层级为 1，使其位于正常文档流之上。位于其他大于一的效果之下从而辅助形成一条线的效果*/
transform-origin: bottom right;/*控制元素的旋转、缩放和倾斜等变换效果的起始位置 从右下开始从而形成逆时针效果bottom right*/
animation: animate 6s linear infinite;
}
当我们把.box里面的overflow：hidden注释掉之后你会发现其本来的样子，实际上就是插入的元素形成了一个盒子，重合的部分形成了那种流光样式的色彩，超出的部分进行隐藏就会出现上述样式的情况
.box::after {
animation-delay: -3s;/*动画开始前延迟*/
}
.borderLine::before {
/* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡，具体颜色值会根据动画来变化。 */
background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
animation-delay: -1.5s; /*动画开始前延迟*/
}
.borderLine::after{
/* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡，具体颜色值会根据动画来变化。 */
background: linear-gradient(0deg, transparent, transparent, #ff2770, #ff2770, #ff2770);
animation-delay: -4.5s;
}
当我们把.box超出部分隐藏给重新注释回来的时候
基于这样的一个css效果的实现，要注意在html元素中，加入required可以使得文本框必须填内容，否则则报错出默认的样式提醒，同时，通过用i标签形成一条白线，并且将这条白线撑高从而代替原本的文本框的样式，是一个值得借鉴的行为**min-height元素的使用使得整体高度为浏览器窗口的高度，同时z-index样式的使用使得有更好的堆叠顺序，使得展示优先级得到进一步的体现，值得我们深入的研究样式的堆叠顺序展示优先级此外，弹性布局方面的研究也更值得我们好好学习，基本的弹性盒模型和样式要掌握，换轴，居中等 最后，动画的设置也值得我们借鉴，上述代码中颜色样式等都可以根据自身喜好进行修改用以达到自身的要求，同时，该只属于css部分，相关js功能并没有实现，需要的大家可以自行添加js，css。
作者：如意呀
链接：https://juejin.cn/post/7259741942409363511
过去的几年中，CSS布局以及我们开发网站前端的方式发生了巨大变化。现在，在CSS用于开发站点的布局方法方面，我们有了真正的选择，这意味着我们经常需要选择采用哪种方法。在本文中，我将通过解释如何使用它们以及如何使用它们的基础知识，介绍您可以使用的各种布局方法。
通过确保文档以结构良好的方式开始，您可以利用正常的流程。想象一下，如果不是浏览器这种正常流动的概念，而是浏览器将所有盒子堆叠在彼此的角上，直到创建布局。那意味着您将必须将所有单个内容放置在页面上。而是，浏览器以立即可读的方式显示我们的内容。
如果您的CSS无法加载，则用户仍然可以阅读内容，而完全不获取CSS的用户（例如，使用屏幕阅读器的用户）将按照文档中的顺序将内容交付给他们。从可访问性的角度来看，使HTML文档井井有条地开始生活至关重要。但是，这也将使您作为Web开发人员的生活更加轻松。如果您的内容符合用户希望阅读的顺序，则无需对布局进行大量更改即可将其放置在正确的位置。使用更新的布局方法，您可能会惊讶于您要做的事很少。
因此，在考虑布局之前，请考虑文档结构和您希望从文档顶部到底部阅读内容的顺序。
有了结构合理的文档后，我们需要决定如何采用该文档并将其转换为所需的布局。对于我们文档的某些部分，这将涉及偏离正常流程。我们有整套的布局方法可供使用。我们将要研究的第一种方法是float，因为浮点数很好地说明了从正常流中取出元素的含义。
浮动框用于将框向左或向右移动，以使内容围绕它显示。
为了浮动项目，请使用CSS属性float和一个left或right值。float的默认值为none。
值得注意的是，当您浮动一个项目并用文本环绕时，会缩短该内容的行框。如果您浮动某个项目，并且以下包含您的文本的框应用了背景色，则可以看到该背景色将在该浮动项下运行。
在缩短行框以在浮动文本和自动换行文本之间留出空间时，必须在浮动项目上设置边距。文本上的边距只是将文本从容器的边缘移入。对于向左浮动的图像，假设您希望图像与容器的顶部和左侧齐平，则应在右侧和底部添加边距。
内容的背景色在浮动下运行
浮动元素后，以下所有元素将环绕该浮动元素，直到它们包裹在下面，并且正常流程继续进行。如果要防止这种情况，则需要清除浮点数。
在要在浮动之后开始显示的元素上，添加clear值为left 的属性以指示清除向左浮动的项目，向右以清除向右浮动的项目，或同时清除所有浮动。
如果希望元素在浮点后开始，则上述方法有效。如果您发现自己的状态是盒子里有一个漂浮的物品，并且旁边有一些文字，那将无济于事。如果文本比浮动项目短，则将在内容下方绘制该框，而忽略浮动项目。正如我们已经了解的那样，浮点数会缩短线框，其余的布局将继续正常流动。
为了防止这种情况，我们需要清除包装箱内的东西。我们可以添加一个空元素并将其设置为清除所有元素。这涉及将空div粘贴到我们的文档中，这并不理想，如果您的页面是由CMS生成的，则可能无法实现。因此，典型的清除浮动方法是所谓的清除修补程序。此方法通过添加CSS生成的内容并将其设置为清除两者来起作用。
清除框内浮点数的另一种方法是在容器上调用块格式化上下文（BFC）。块格式上下文包含其中的所有内容，其中将包括无法再戳出框底部的浮动项目。有几种强制BFC的方法，清除浮点数时最常见的方法是将溢出属性设置为具有默认可见值以外的值。
以这种方式使用溢出通常会起作用，但是，在某些情况下，您最终可能会在项目上留下阴影或不必要的滚动条。在样式表中看起来也有些混乱：您是否设置了溢出是因为需要滚动条还是只是为了获得这种清除功能？
为了使意图更清晰并防止创建BFC引起不必要的副作用，可以将其flow-root用作该display属性的值。唯一要做的display: flow-root就是创建一个BFC，从而清除浮标而不会引起其他问题。
在使用较新的布局方法来创建列布局之前，浮动技术一直通过为一组项目提供一定的宽度并将它们设置为彼此相邻浮动来起作用。仔细管理这些浮动框的百分比大小可能会产生网格效果。
我不建议立即开始新设计并使用此方法。但是，它将在现有站点中保留很多年。因此，如果遇到几乎所有东西都漂浮的设计，那么这就是使用的技术。
要从普通流中删除元素或将其从普通流中的位置移开，可以使用positionCSS中的属性。正常流动时，元素position的static。这些项目在“块”维度中一个接一个地显示，如果滚动页面，它们也会随之滚动。
更改位置值时，通常还会使用偏移值将框从特定参考点移开。使用的参考点取决于您使用的位置值。
如果项目具有position: relative参考点，则该参考点通常是正常流动的地方。然后，您可以使用偏移的属性值top，left，bottom和right移动从那里通常会显示框。
请注意，页面上的其他项目不会响应元素的新位置。保留了它在正常流程中的位置，因此您需要自己管理所有重叠部分。
设置position: absolute的一个项目，它完全从正常流程中移除。剩下的空间将被删除。然后，将相对于其包含的块定位该项目，除非将其嵌套在另一个定位的元素内，否则它将为视口。
因此，如果position: absolute在项目上进行设置，将会发生的第一件事是，它通常最终会卡在视口的顶部和左侧。然后，您可以使用偏移的属性值top，left，bottom并right从该位置移动框，你希望它是。
通常，您不希望根据视口放置盒子，但是在引用包含元素时，它位于内部。在这种情况下，您需要为包含该元素的位置赋予默认静态值以外的位置值。
由于设置position: relative不会从正常流程中删除该项目，因此这是通常的选择。给您希望设置偏移的父元素，position: relative然后从该元素的边界偏移绝对定位的块。
position: fixed在大多数情况下，带有的东西将相对于视口放置，并从文档流中删除，因此不会为其保留任何空间。滚动页面时，固定元素将相对于视口保持在适当的位置，因为正常流中的其余内容照常滚动。
这有助于启用固定的导航面板，该面板在屏幕上（例如，在内容滚动时）保持在屏幕上。与其他定位值一样，这样做可能会导致重叠，因此应注意所有内容都可以读取并且不会以固定项目结尾。
*请认真填写需求信息，我们会在24小时内与您取得联系。
