本篇文章為大家展示了css中怎么實(shí)現(xiàn)動(dòng)態(tài)陰影效果，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、岫巖網(wǎng)站維護(hù)、網(wǎng)站推廣。

css實(shí)現(xiàn)動(dòng)態(tài)陰影

創(chuàng)建與類似的陰影box-shadow 而是基于元素本身的顏色。

代碼實(shí)現(xiàn)：

<div class="dynamic-shadow-parent">
  <div class="dynamic-shadow"></div>
</div>
<style>
.dynamic-shadow-parent {
  position: relative;
  z-index: 1;
}
.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
}
.dynamic-shadow::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}
</styel>

效果如下：

說(shuō)明

代碼片段需要一些復(fù)雜的情況來(lái)正確堆疊上下文，這樣偽元素將定位在元素本身的下面，同時(shí)仍然可見(jiàn)。

position: relative 在父元素上為子元素建立笛卡爾定位上下文。
z-index: 1 建立新的堆疊內(nèi)容。
position: relative 在子級(jí)上建立偽元素的定位上下文。
::after 定義偽元素。
position: absolute 從文檔流中取出偽元素，并將其相對(duì)于父元素定位。
width: 100% 和height: 100%調(diào)整偽元素的大小以填充其父元素的尺寸，使其大小相等。
background: inherit 使偽元素繼承在元素上指定的線性漸變。
top: 0.5rem 將偽元素從其父元素稍微向下偏移。
filter: blur(0.4rem) 將模糊偽元素以在下面創(chuàng)建陰影的外觀。
opacity: 0.7 使偽元素部分透明。
z-index: -1 將偽元素定位在父元素后面。

瀏覽器支持91.7 %,需要前綴才能獲得完全支持

蝕刻文本

創(chuàng)建文本顯示為“蝕刻”或刻在背景中的效果。

代碼實(shí)現(xiàn)：

<p class="etched-text">I appear etched into the background.</p>
</styel>
.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}
</styel>

效果如下：

說(shuō)明

text-shadow: 0 2px white 創(chuàng)建白色陰影偏移0px 水平和2px 垂直于原點(diǎn)位置。

背景必須比陰影暗，效果才能發(fā)揮作用。

文字顏色應(yīng)該稍微褪色，使其看起來(lái)像是刻在背景上的。

瀏覽器支持98.1 %,沒(méi)有警告。

漸變文本

為文本提供漸變顏色。

代碼實(shí)現(xiàn)：

<p class="gradient-text">Gradient text</p>
</styel>
.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
</styel>

效果如下：

說(shuō)明

background: -webkit-linear-gradient(...) 為文本元素提供漸變背景。
webkit-text-fill-color: transparent 使用透明顏色填充文本。
webkit-background-clip: text 用文本剪輯背景，用漸變背景作為顏色填充文本。

上述內(nèi)容就是css中怎么實(shí)現(xiàn)動(dòng)態(tài)陰影效果，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

本文標(biāo)題：css中怎么實(shí)現(xiàn)動(dòng)態(tài)陰影效果-創(chuàng)新互聯(lián)
瀏覽路徑：http://chinadenli.net/article40/ddipho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、云服務(wù)器、品牌網(wǎng)站建設(shè)、域名注冊(cè)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)