溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“CSS漸變、陰影和濾鏡方法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
CSS 漸變是image類型的一種特殊類型用gradient表示，由兩種或多種顏色之間的漸進(jìn)過(guò)渡組成。
三種漸變類型：
線性：由linear-gradient()函數(shù)創(chuàng)建
徑向：由radial-gradient()函數(shù)創(chuàng)建
圓錐：由conic-gradient()函數(shù)創(chuàng)建
ps：還可以使用 repeating-linear-gradient()和repeating-radial-gradient()函數(shù)創(chuàng)建重復(fù)漸變。
漸變可以在任何使用image的地方使用，例如在背景中。
說(shuō)明
要?jiǎng)?chuàng)建線性漸變，只需指定兩種顏色即可，這些被稱為色標(biāo)，至少指定兩個(gè)色標(biāo)，還可以設(shè)置起點(diǎn)和方向（或角度）以及漸變效果。
語(yǔ)法
background-image: linear-gradient(direction(方向), color1(顏色值), color2(顏色值), ...);
代碼示例
<style>
.box {
width: 300px;
height: 100px;
background-image: linear-gradient(red, yellow);
}</style>
<body>
<p class="box"></p>
</body>效果如下
代碼示例
background-image: linear-gradient(to right, red, yellow);
效果如下
代碼示例
background-image: linear-gradient(to bottom right, red, yellow);
效果如下
說(shuō)明
如果你想要更精確地控制漸變的方向，你可以給漸變?cè)O(shè)置一個(gè)具體的角度。
在使用角度的時(shí)候, 0deg 代表漸變方向?yàn)閺南碌缴? 90deg 代表漸變方向?yàn)閺淖蟮接?，諸如此類正角度都屬于順時(shí)針方向。 而負(fù)角度意味著逆時(shí)針方向。
代碼示例
background-image: linear-gradient(180deg, red, yellow);
效果如下
代碼示例
background-image: linear-gradient(red, yellow, green);
效果如下
說(shuō)明
repeating-linear-gradient() 函數(shù)用于重復(fù)線性漸變。
代碼示例
background-image: repeating-linear-gradient(red, yellow 10px);
效果如下
說(shuō)明
徑向漸變類似于線性漸變，不同的地方是徑向漸變從中心點(diǎn)向外輻射。
可以指定該中心點(diǎn)的位置，還可以將它們?cè)O(shè)為圓形或橢圓形。
語(yǔ)法
background-image: radial-gradient(shape(設(shè)置形狀，默認(rèn)為橢圓形), size(最遠(yuǎn)角), position(中心), color1(顏色值), color2(顏色值));
代碼示例
<style>
.box {
width: 300px;
height: 100px;
background-image: radial-gradient(red, yellow, green);
}</style>
<body>
<p class="box"></p>
</body>效果如下
代碼示例
background-image: radial-gradient(red 10%, yellow 20%, green 50%);
效果如下
代碼示例
/* 設(shè)置為圓形形狀 */background-image: radial-gradient(circle, red 10%, yellow 20%, green 50%);
效果如下
說(shuō)明
您可以使用關(guān)鍵字、百分比或絕對(duì)長(zhǎng)度、長(zhǎng)度和百分比值重復(fù)來(lái)定位漸變的中心（如果只有一個(gè)），否則按照從左到右的位置順序。
代碼示例
background-image: radial-gradient(at 10% 30%, red 10%, yellow 20%, green 50%);
效果如下
代碼示例
background-image: repeating-radial-gradient(black, black 5px, #fff 5px, #fff 10px);
效果如下
說(shuō)明
圓錐漸變類似于徑向漸變，兩者均為圓形，并使用元素的中心作為色標(biāo)的源點(diǎn)。
它是圍繞中心點(diǎn)按照扇形方向進(jìn)行旋轉(zhuǎn)的漸變。
語(yǔ)法
background-image: conic-gradient(from angle(表示起始的角度,默認(rèn)為從上到下) at position(設(shè)置圓錐中心點(diǎn)的位置), start-color(定義開始顏色), stop-color(定義結(jié)束顏色))
代碼示例
<style>
.box {
width: 300px;
height: 300px;
background-image: conic-gradient(red,yellow);
}</style>
<body>
<p class="box"></p>
</body>效果如下
代碼示例
background-image: conic-gradient(at 30% 20%, red,yellow);
效果如下
代碼示例
background-image: conic-gradient(red, orange, yellow, green, teal, blue, purple);
效果如下
代碼示例
background-image: repeating-conic-gradient(red 10%, yellow 20%);
效果如下
說(shuō)明
要在不同顏色之間創(chuàng)建一條單一的硬線，即不同顏色的顏色不是不同的，可以將不同的位置顏色設(shè)置為相同
代碼示例
background: linear-gradient(to bottom left, red 50%, yellow 50%);
效果如下
說(shuō)明
如需添加透明度，我們使用 rgba() 函數(shù)來(lái)定義色標(biāo)。 rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是 0 到 1 的值，它定義顏色的透明度：0 表示全透明，1 表示全彩色（無(wú)透明）。
也可以使用 transparent參數(shù)，代表全透明。
代碼示例
background-image: linear-gradient(to right, transparent, red);
效果如下
CSS陰影主要的作用是可以讓頁(yè)面中的文字和元素具有立體的效果，從而被突出出來(lái)。
兩種陰影屬性：
box-shadow：用于給元素添加陰影
text-shadow：用于給文本添加陰影
ps：還有一個(gè) filter 濾鏡的函數(shù)drop-shadow()也可以添加陰影，它主要用于給透明圖像的非透明部分添加陰影效果。
box-shadow屬性box-shadow屬性說(shuō)明
用于在元素的框架上添加陰影效果，還可以在同一個(gè)元素上設(shè)置多個(gè)陰影效果，用逗號(hào)隔開。
語(yǔ)法
box-shadow: OffsetX(水平偏移), OffsetY(垂直偏移), Blur(模糊半徑), Spread(擴(kuò)展距離，陰影的尺寸), Color(陰影顏色), Position(陰影位置，默認(rèn)在外部(outset));
box-shadow屬性的應(yīng)用box-shadow屬性-基本使用代碼示例
<style>
.box {
width: 300px;
height: 300px;
background-color: yellow;
box-shadow: 10px 10px;
}</style>
<body>
<p class="box"></p>
</body>效果如下
box-shadow屬性-多重陰影與定向陰影代碼示例
box-shadow: -5px 0 5px 0px #000, 0 -5px 5px 0px #000;
效果如下
box-shadow屬性-模擬邊框代碼示例
box-shadow: 0px 0px 0px 10px #000, 0px 0px 0px 20px red;
效果如下
box-shadow屬性-內(nèi)陰影代碼示例
box-shadow: 0px 0px 30px 10px red inset;
效果如下
text-shadow屬性text-shadow屬性說(shuō)明
為文字添加陰影，也可以添加多個(gè)陰影，用逗號(hào)隔開。
語(yǔ)法
text-shadow: OffsetX(水平偏移), OffsetY(垂直偏移), Blur(模糊半徑), Color(陰影顏色));
注意
text-shadow沒有擴(kuò)展距離屬性值，陰影位置屬性值。
text-shadow屬性的應(yīng)用text-shadow屬性-基本使用代碼示例
<style>
.box {
width: 300px;
height: 300px;
background-color: yellow;
text-shadow: 0px 0px 5px red;
}</style>
<body>
<p class="box">hello world</p>
</body>效果如下
text-shadow屬性基本與box-shadow屬性一樣，就不多舉例了
濾鏡這兩個(gè)字我相信大家都很熟悉，平時(shí)愛自拍，拍照的同學(xué)肯定都會(huì)打開濾鏡修飾一下圖片吧，那么CSS濾鏡也是這樣，直接用filter屬性來(lái)修飾圖像。
blur()：模糊
可以任何長(zhǎng)度單位，值為 0 顯示原圖，值越大越模糊
brightness()：亮度
百分比，可用 0~1 代替，值為 0 顯示全黑，值為 100% 顯示原圖
contrast()：對(duì)比度
百分比，可用 0~1 代替，值為 0 顯示全黑，值為 100% 顯示原圖
drop-shadow()：陰影
/* 代碼示例 */
<style>
.box1 {
width: 300px;
height: 300px;
border: 3px solid red;
box-shadow: 5px 5px 10px 0 black;
}
.box2 {
width: 300px;
height: 300px;
border: 3px solid red;
filter: drop-shadow(5px 5px 10px black);
}
</style>
<body>
<p class="box1"></p>
<p class="box2"></p>
</body>與box-shadow屬性類似
沒有內(nèi)陰影效果
不能陰影疊加
說(shuō)明
代碼示例
grayscale()：灰度
百分比，可用 0~1 代替，值為 0 顯示原圖，值為 100% 顯示全灰
hue-rotate()：色相旋轉(zhuǎn)
角度，值為 0 顯示原圖，值為 0~360deg 減弱原圖色彩，
invert()：反相
百分比，可用 0~1 代替，值為 0 顯示原圖，值為 100% 完全反轉(zhuǎn)原圖色彩
opacity()：透明度
百分比，可用 0~1 代替，值為 0 顯示透明，值為 100% 顯示原圖
saturate()：飽和度
百分比，可用 0~1 代替，值為 0 完全不飽和原圖，值為 100% 顯示原圖
sepia()：褐色
百分比，可用 0~1 代替，值為 0 顯示原圖，值為 100% 顯示褐色
代碼示例
<style>
.box {
filter: grayscale(1);
}</style>
<body>
<p class="box">
<img src="./imgs/1.jpg" alt="">
</p>
</body>效果如下
“CSS漸變、陰影和濾鏡方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼