CSS倒影炫酷屬性 -webkit-box-refl

CSS倒影炫酷屬性 -webkit-box-reflect 的使用

、相關(guān)知識(shí)點(diǎn)

介紹

文檔

MDN關(guān)于倒影屬性介紹：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

官方說(shuō)明：

非標(biāo)準(zhǔn):該特性是非標(biāo)準(zhǔn)的，不在標(biāo)準(zhǔn)軌道上。不要在面向Web的生產(chǎn)站點(diǎn)上使用它:它并不適用于每個(gè)用戶。實(shí)現(xiàn)之間也可能存在很大的不兼容性，將來(lái)行為可能會(huì)發(fā)生變化

瀏覽器兼容性：

總結(jié)

雖然這是個(gè)非標(biāo)準(zhǔn)屬性，但是大多數(shù)瀏覽器都支持，火狐除外，追求效果的還是可以使用的。

屬性相關(guān)

支持三個(gè)位置的屬性值：
-webkit-box-reflect：屬性值1 屬性值2 屬性值3；

屬性值1：倒影的位置：

-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */

屬性值2：倒影的距離：

-webkit-box-reflect: below 10px;  /* 下，距離10像素 */

屬性值3：倒影的遮罩層：

-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下，距離0像素，線性遮罩最后白色 */

二、實(shí)現(xiàn)步驟

完整代碼：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { margin: 0; }
			#time {
				width: 300px;
				height: 80px;
				line-height: 80px;
				font-size: 48px;
				text-align: center;
				font-weight: bold; /* 下 */
				color: #fff;
				background-color: #2196f3;
				-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
			}
		</style>
	</head>
	<body>
		<div id="time"></div>
		<script>
			function refreshTime(){
				let time=document.getElementById('time');

				let h=new Date().getHours(); //小時(shí)
				let m=new Date().getMinutes(); //分鐘
				let s=new Date().getSeconds(); //秒

				time.innerHTML=`${h}:${m}:${s}`
				setTimeout(refreshTime, 1000)
			}

			refreshTime()
		</script>
	</body>
</html>

總結(jié)

以上就是今天要講的內(nèi)容，本文介紹CSS倒影屬性，更多詳細(xì)內(nèi)容，自己多寫(xiě)寫(xiě)代碼，多練練，可以參考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。

如果覺(jué)得有用歡迎點(diǎn)贊，關(guān)注
有問(wèn)題私信我！！

實(shí)際 Web 開(kāi)發(fā)過(guò)程中，總會(huì)遇到各種各樣的布局，比如下面的各種“優(yōu)惠券”，一起來(lái)看看吧

一、最佳實(shí)現(xiàn)方式

首先，碰到這類(lèi)布局的最佳實(shí)現(xiàn)肯定是 mask遮罩。關(guān)于遮罩，可以看一下 CSS3 Mask 安利報(bào)告。這里簡(jiǎn)單介紹一下

基本語(yǔ)法很簡(jiǎn)單，和 background 的語(yǔ)法基本一致

.content{
  -webkit-mask: '遮罩圖片' ;
}


/*完整語(yǔ)法*/
.content{
  -webkit-mask: '遮罩圖片' [position] / [size] ;
}

這里的遮罩圖片和背景的使用方式基本一致，可以是PNG圖片、SVG圖片、也可以是漸變繪制的圖片，同時(shí)也支持多圖片疊加。

遮罩的原理很簡(jiǎn)單，最終效果只顯示不透明的部分，透明部分將不可見(jiàn)，半透明類(lèi)推

事實(shí)上，除了根據(jù)透明度（Alpha）來(lái)作為遮罩條件，還可以通過(guò)亮度（luminance）來(lái)決定，比如白色表示隱藏，黑色表示可見(jiàn)。不過(guò)目前只有 Firefox 支持

所以，只要能繪制以上各種形狀，就可以實(shí)現(xiàn)了。

二、內(nèi)凹圓角

優(yōu)惠券大多有一個(gè)很明顯的特點(diǎn)，就是內(nèi)凹圓角。提到圓角，很容易想到 radial-gradient 。這個(gè)語(yǔ)法有點(diǎn)復(fù)雜，記不住沒(méi)關(guān)系，可以看看張老師的這篇 10個(gè)demo示例學(xué)會(huì)CSS3 radial-gradient徑向漸變。

.content{
  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); 
}

這樣就繪制了一個(gè)半徑為 20px 的透明的圓，不過(guò)代碼層面還有很多優(yōu)化的空間。

在實(shí)現(xiàn)邊界分明的漸變時(shí)，后面顏色的位置只需要小于等于前面顏色的位置就行了，比如 0
透明顏色可以用16進(jìn)制 縮寫(xiě)比如#0000 來(lái)代替，不透明的部分隨便用一個(gè)顏色就好，我喜歡用 red，主要是這個(gè)單詞比較短
還有漸變的位置默認(rèn)是居中的，所以第二個(gè)center可以去除，left 可以用 0 來(lái)表示

進(jìn)一步簡(jiǎn)化就得到了

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); 
}

不錯(cuò)，又少了好幾個(gè)B的流量~ 可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)1

三、優(yōu)惠券效果

上面是一個(gè)最基本的內(nèi)凹圓角效果，現(xiàn)在來(lái)實(shí)現(xiàn)下面幾種布局，比如兩個(gè)半圓的，根據(jù)上面的例子，再?gòu)?fù)制一個(gè)圓不就可以了？改一下定位的方向

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
}

這時(shí)發(fā)現(xiàn)一個(gè)圓都沒(méi)有了。原因其實(shí)很簡(jiǎn)單，如下演示，兩層背景相互疊加，導(dǎo)致整塊背景都成了不透明的，所以 mask 效果表現(xiàn)為全部可見(jiàn)。

解決方式有2個(gè)，分別是：

把兩個(gè)凹角的地方錯(cuò)開(kāi)，這里可以通過(guò)修改尺寸和位置，同時(shí)還需要禁止平鋪

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-size: 51%; /*避免出現(xiàn)縫隙*/
  -webkit-mask-position: 0, 100%; /*一個(gè)居左一個(gè)居右*/
  -webkit-mask-repeat: no-repeat;
}

動(dòng)態(tài)演示如下，這樣就不會(huì)互相覆蓋了

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)2

使用遮罩合成 mask-composite ，這個(gè)可能不太熟悉，簡(jiǎn)單介紹一下

標(biāo)準(zhǔn)屬性下 mask-composite 有 4 個(gè)屬性值（Firefox支持）

/* Keyword values */
mask-composite: add; /* 疊加（默認(rèn)） */
mask-composite: subtract; /* 減去，排除掉上層的區(qū)域 */
mask-composite: intersect; /* 相交，只顯示重合的地方 */
mask-composite: exclude; /* 排除，只顯示不重合的地方 */

這個(gè)可能有些不好理解，其實(shí)可以參考一些圖形軟件的形狀合成操作，比如 photoshop

-webkit-mask-composite 與標(biāo)準(zhǔn)下的值有所不同，屬性值非常多，看下面

-webkit-mask-composite: clear; /*清除，不顯示任何遮罩*/
-webkit-mask-composite: copy; /*只顯示上方遮罩，不顯示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只顯示重合的地方*/
-webkit-mask-composite: source-out; /*只顯示上方遮罩，重合的地方不顯示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只顯示重合的地方*/
-webkit-mask-composite: destination-out;/*只顯示下方遮罩，重合的地方不顯示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只顯示不重合的地方*/

是不是一下就懵了？不用慌，可以看到上面有幾個(gè)值是 source-*，還有幾個(gè)是 destination-*開(kāi)頭的，source 代表新內(nèi)容，也就是上面繪制的圖層， destination 代表元內(nèi)容，也就是下面繪制的圖層（在CSS中，前面的圖層會(huì)覆蓋后面的圖層），這里的屬性值其實(shí)是借用了Canvas 中的概念，具體可以查看 CanvasRenderingContext2D.globalComposite

記不住沒(méi)關(guān)系，實(shí)際開(kāi)發(fā)可以逐一試驗(yàn)[捂臉]。具體差異可以查看 codepen -webkit-mask-composite 屬性值演示

了解這個(gè)屬性后，上面的疊加問(wèn)題就很簡(jiǎn)單了，設(shè)置只顯示重合的地方就行了

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

動(dòng)態(tài)演示如下，這樣只會(huì)顯示互相重合的地方

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)3

2個(gè)圓角的實(shí)現(xiàn)了，4個(gè)的就很容易了，畫(huà)4個(gè)圓就行，同樣利用遮罩合成可以輕易實(shí)現(xiàn)

content{
  -webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /*4個(gè)角落各放一個(gè)圓*/
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)4

四、優(yōu)惠券平鋪效果

上面的例子展示了2個(gè)圓角和4個(gè)圓角的效果，分別繪制了2個(gè)和4個(gè)圓，其實(shí)這是可以通過(guò)平鋪來(lái)實(shí)現(xiàn)的，只需要一個(gè)圓就可以。實(shí)現(xiàn)步驟如下

畫(huà)一個(gè)左中的靠邊的透明圓

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}

向左平移自身的一半

.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px
}


/*也可以縮寫(xiě)為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 
}

效果就出來(lái)了，是不是很神奇？其實(shí)就是利用到了默認(rèn)的 repeat特性，這里用一張動(dòng)圖就能明白了

下面紅色邊框內(nèi)表示視區(qū)范圍，也就是最終的效果，這里為了演示，把視線之外的平鋪做了半透明處理，移動(dòng)表示 position 改變的過(guò)程

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)5

同樣原理，4個(gè)圓角也可以采用這種方式實(shí)現(xiàn)

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
}


/*也可以縮寫(xiě)為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

實(shí)現(xiàn)原理演示如下

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)6

6個(gè)圓角就需要改一下平鋪尺寸了。

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}


/*也可以縮寫(xiě)為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

實(shí)現(xiàn)原理演示如下

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)7

如果繼續(xù)縮小背景圖的尺寸，還可以得到最后的效果

.content{
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}


/*也可以縮寫(xiě)為*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}

實(shí)現(xiàn)原理演示如下，其實(shí)就平鋪

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)8

五、反向鏤空疊加

有些情況下可能單一的一層漸變繪制不了很復(fù)雜的圖形，這就需要用到反向鏤空技術(shù)了，其實(shí)就是上面提到過(guò)的遮罩合成 ，這里再運(yùn)用一下

先把上面的實(shí)現(xiàn)拿過(guò)來(lái)

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

直接在這個(gè)基礎(chǔ)上打一排小洞

.content{
  -webkit-mask: radial-gradient( circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

注意這里用到了 -webkit-mask-composite: destination-out，表示減去，只顯示下方遮罩，重合的地方不顯示

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)9

也可以放在兩邊，改一下 position 就可以了

.content{
  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

可以查看在線實(shí)例 codepen 優(yōu)惠券實(shí)現(xiàn)10

六、邊框遮罩

有些同學(xué)覺(jué)得徑向漸變太復(fù)雜，實(shí)在是寫(xiě)不出來(lái)，能不能用圖片代替呢？其實(shí)也是可行的。這里說(shuō)的邊框遮罩指的是 mask-border , 目前還在 W3C 草案當(dāng)中，不過(guò)有一個(gè)替代屬性 -webkit-mask-box-image

語(yǔ)法和概念和 border-image 非常相似，關(guān)于 border-image 可參考這篇文章 border-image 的正確用法，這里主要了解一下用法和效果

.content{
  -webkit-mask-box-image: '遮罩圖片' [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
}

比如有一張這樣的圖片

SVG代碼長(zhǎng)這樣，很多工具都可以導(dǎo)出來(lái)，實(shí)在不會(huì)可以直接找設(shè)計(jì)同學(xué)

<svg xmlns="http://www.w3.org/2000/svg" width="60.031" height="60.031" viewBox="0 0 60.031 60.031"><path d="M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z" fill-rule="evenodd"/></svg>

這里需要轉(zhuǎn)義一下，可借助張老師的 SVG在線合并工具

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  /*這里的20表示四周保留20像素的固定區(qū)域，剩余部分平鋪或者拉伸*/
}

然后就實(shí)現(xiàn)了這樣一個(gè)形狀，同樣是自適應(yīng)的

可以查看在線實(shí)例 codepen -webkit-mask-box-iamge 實(shí)現(xiàn)1

再比如有一張這樣的圖片

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M55.186 30.158a4.965 4.965 0 0 0 4.841 4.959V40A20.063 20.063 0 0 0 40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0v-4.888c.054 0 .1.016.158.016a4.973 4.973 0 1 0 0-9.945c-.054 0-.1.014-.158.015v-5.074h.065A20.066 20.066 0 0 0 20.131.058v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064v5.07a4.965 4.965 0 0 0-4.841 4.966z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
}

可以得到這樣一個(gè)形狀，兩側(cè)的半圓被拉伸了

這時(shí)只需要設(shè)置平鋪方式 -webkit-mask-box-image-repeat , 這個(gè)和 border-image-repeat 是一樣的概念，有以下 4 個(gè)值

-webkit-mask-box-image-repeat: stretch; /*拉伸(默認(rèn))，不會(huì)平鋪*/
-webkit-mask-box-image-repeat: repeat; /*重復(fù)*/
-webkit-mask-box-image-repeat: round; /*重復(fù)，當(dāng)不能整數(shù)次平鋪時(shí)，根據(jù)情況拉伸。*/
-webkit-mask-box-image-repeat: space; /*重復(fù)，當(dāng)不能整數(shù)次平鋪時(shí)，會(huì)用空白間隙填充*/

幾種平鋪方式的差異如下

這里我們可以采用 round 或者 repeat

.content{
  -webkit-mask-box-image: url("...") 20;
  -webkit-mask-box-image-repeat: round;
}

可以查看在線實(shí)例 codepen -webkit-mask-box-iamge 實(shí)現(xiàn)2

七、總結(jié)和說(shuō)明

以上一共介紹了12種繪制優(yōu)惠券的案例，應(yīng)該可以解決掉絕大部分這類(lèi)布局的問(wèn)題，這里總結(jié)以下幾點(diǎn)

CSS mask 一定是這類(lèi)布局最完美的實(shí)現(xiàn)方式
需要 CSS radial-gradient 繪制圖形的技巧
盡可能采用 repeat 來(lái)重復(fù)相同的元素
多種形狀疊加時(shí)需要靈活運(yùn)用 mask-composite
也可以采用圖片來(lái)代替CSS漸變，需要使用 mask-border

關(guān)于兼容性，其實(shí)不考慮 IE 都沒(méi)有什么大問(wèn)題，最后的 mask-border 目前只兼容 chrome 內(nèi)核，移動(dòng)端可放心使用

感謝閱讀，希望能對(duì)日后的工作有所啟發(fā)。

開(kāi)發(fā)交互式用戶界面時(shí)，層級(jí)樣式表 (CSS) 非常強(qiáng)大。 CSS 有一些驚人的隱藏提示和技巧，可以用來(lái)改善你的網(wǎng)站的外觀。

在本文中，將介紹每個(gè)前端開(kāi)發(fā)人員在開(kāi)發(fā)出色且用戶友好的網(wǎng)頁(yè)時(shí)需要知道的一些很棒的 CSS 技巧。

1.首字下沉

可以在 CSS 中實(shí)現(xiàn)首字下沉。它看起來(lái)很簡(jiǎn)單。比如下面顯示的圖像和代碼片段。

p:first-letter {
    font-size: 3rem;
}

2.給文字添加漸變

為文本添加漸變使文本提供了令人驚嘆的顏色。

它還為你的設(shè)計(jì)添加了一些引人注目的功能。

要向文本添加漸變，它采用下面顯示的代碼片段的形式。

p {
  font-size: 48px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. 使用 SVG 遮罩圖像

有了這個(gè)功能，我們可以在 SVG 中屏蔽圖像。檢查下面顯示的圖像。

CSS 非常強(qiáng)大，為我們提供了許多可以實(shí)現(xiàn)的功能來(lái)實(shí)現(xiàn)此功能。


<svg>
<clippath id='clippath'>
/* Enter your svg here*/
</clippath>
</svg>

<style>
img:{
clip-path:url(#clippath)
}
</style>

4. 使用圖像作為光標(biāo)

我們可以在 CSS 中使用圖像作為光標(biāo)。舉個(gè)例子，你想在你的內(nèi)容上提供一個(gè)圖像光標(biāo)。

要執(zhí)行此操作，只需要提供如下代碼片段所示。

h1{
    cursor:url("custom.gif"), auto;

}

5. 為列表標(biāo)記設(shè)置樣式

厭倦了普通無(wú)聊的列表？CSS 使列表的樣式成為可能。

要自定義列表標(biāo)記，只需要對(duì) CSS 進(jìn)行編碼，如下所示。

::marker{
  color:#f548r9;
  text-shadow:2px 2px black;
    
}

6. 設(shè)計(jì)視頻的字幕。

CSS 具有強(qiáng)大的提示偽元素，可用于設(shè)置視頻中的字幕樣式。

::cue{
    color:green;
    background:red;
}

7. 用文字剪輯視頻

CSS 使剪輯帶有文本的視頻成為可能。

查看下面代碼片段。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<stye>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 500px;
}

.container video {
  width: 100%;
  height: 100%;
}

.container .text {
  position: absolute;
  top: 0;
    line-height: 350px;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #ffffff;
  mix-blend-mode: screen;
  font-size: 15em;
  font-family: 'Bebas Neue', sans-serif;
}
</style>
<div class="container">
  <video autoplay loop muted>
    <source src="https://res.cloudinary.com/dptgkdbjg/video/upload/v1623121486/video_iqbbwc.mp4" type="video/mp4">
  </video>
  <div class="text">
    <p>OCEAN</p>
  </div>
</div>

8.平滑滾動(dòng)

雖然我們可以使用 JavaScript 實(shí)現(xiàn)平滑滾動(dòng)，但 CSS 使我們可以更輕松地在我們的網(wǎng)站中實(shí)現(xiàn)平滑滾動(dòng)。

要啟用平滑滾動(dòng)，需要將 smooth-behavior 設(shè)置為平滑。

檢查下面顯示的代碼段。

html{
  scroll-behavior:smooth;
}

9. 過(guò)濾圖像

圖像構(gòu)成了網(wǎng)絡(luò)的很大一部分，可以使用過(guò)濾器來(lái)模糊圖像。也可以使用過(guò)濾器屬性來(lái)模糊、飽和、添加亮度、添加其他屬性中的飽和度。

查看下面的代碼片段。

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

10. 自定義移動(dòng)瀏覽器標(biāo)題中的地址欄。

看看下面顯示的圖像。移動(dòng)瀏覽器標(biāo)題有多種顏色。我們可以修改它并創(chuàng)建與我們網(wǎng)站的顏色主題相融合的顏色。

要更改或自定義移動(dòng)瀏覽器標(biāo)題中的默認(rèn)地址欄，我們需要包含元標(biāo)記，如下面的代碼片段所示。

<meta name='theme-color' content='#0575e6' />

在元標(biāo)記中，我們需要傳入兩個(gè)參數(shù)，即名稱(chēng)和內(nèi)容，我們指定我們想要的顏色。您可以在十六進(jìn)制代碼中包含顏色。

最后的想法

當(dāng)想要構(gòu)建交互式用戶界面時(shí)，層級(jí)樣式表非常強(qiáng)大。

這些只是我們可以在 CSS 中利用的一些提示和技巧。

在線咨詢

上一篇：D-Link無(wú)線路由器設(shè)置圖解
下一篇：老大，你為什么在代碼中要求我們使用LocalDate

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商