整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
隨著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小時內與您取得聯系。
