整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、相關知識點
介紹
文檔
MDN關于倒影屬性介紹：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
官方說明：
非標準:該特性是非標準的，不在標準軌道上。不要在面向Web的生產站點上使用它:它并不適用于每個用戶。實現之間也可能存在很大的不兼容性，將來行為可能會發生變化
瀏覽器兼容性：
總結
雖然這是個非標準屬性，但是大多數瀏覽器都支持，火狐除外，追求效果的還是可以使用的。
支持三個位置的屬性值：
-webkit-box-reflect：屬性值1 屬性值2 屬性值3；
-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */-webkit-box-reflect: below 10px; /* 下，距離10像素 */-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下，距離0像素，線性遮罩最后白色 */ 完整代碼：
<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(); //小時
let m=new Date().getMinutes(); //分鐘
let s=new Date().getSeconds(); //秒
time.innerHTML=`${h}:${m}:${s}`
setTimeout(refreshTime, 1000)
}
refreshTime()
</script>
</body>
</html>以上就是今天要講的內容，本文介紹CSS倒影屬性，更多詳細內容，自己多寫寫代碼，多練練，可以參考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。
如果覺得有用歡迎點贊，關注
有問題私信我！！
實際 Web 開發過程中，總會遇到各種各樣的布局，比如下面的各種“優惠券”，一起來看看吧
首先，碰到這類布局的最佳實現肯定是 mask遮罩 。關于遮罩，可以看一下 CSS3 Mask 安利報告 。這里簡單介紹一下
基本語法很簡單，和 background 的語法基本一致
.content{
-webkit-mask: '遮罩圖片' ;
}
/*完整語法*/
.content{
-webkit-mask: '遮罩圖片' [position] / [size] ;
}
這里的遮罩圖片和背景的使用方式基本一致，可以是PNG圖片、SVG圖片、也可以是漸變繪制的圖片，同時也支持多圖片疊加。
遮罩的原理很簡單，最終效果只顯示不透明的部分，透明部分將不可見，半透明類推
事實上，除了根據透明度（Alpha）來作為遮罩條件，還可以通過亮度（luminance）來決定，比如白色表示隱藏，黑色表示可見。不過目前只有 Firefox 支持
所以，只要能繪制以上各種形狀，就可以實現了。
優惠券大多有一個很明顯的特點，就是內凹圓角。提到圓角，很容易想到 radial-gradient 。這個語法有點復雜，記不住沒關系，可以看看張老師的這篇 10個demo示例學會CSS3 radial-gradient徑向漸變 。
.content{
-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px);
}
這樣就繪制了一個半徑為 20px 的透明的圓，不過代碼層面還有很多優化的空間。
進一步簡化就得到了
.content{
-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0);
}
不錯，又少了好幾個B的流量~ 可以查看在線實例 codepen 優惠券實現1
上面是一個最基本的內凹圓角效果，現在來實現下面幾種布局，比如兩個半圓的，根據上面的例子，再復制一個圓不就可以了？改一下定位的方向
.content{
-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);
}
這時發現一個圓都沒有了。原因其實很簡單，如下演示，兩層背景相互疊加，導致整塊背景都成了不透明的，所以 mask 效果表現為全部可見。
解決方式有2個，分別是：
.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%; /*避免出現縫隙*/
-webkit-mask-position: 0, 100%; /*一個居左一個居右*/
-webkit-mask-repeat: no-repeat;
}
動態演示如下，這樣就不會互相覆蓋了
可以查看在線實例 codepen 優惠券實現2
標準屬性下 mask-composite 有 4 個屬性值（Firefox支持）
/* Keyword values */
mask-composite: add; /* 疊加（默認） */
mask-composite: subtract; /* 減去，排除掉上層的區域 */
mask-composite: intersect; /* 相交，只顯示重合的地方 */
mask-composite: exclude; /* 排除，只顯示不重合的地方 */
這個可能有些不好理解，其實可以參考一些圖形軟件的形狀合成操作，比如 photoshop
-webkit-mask-composite 與標準下的值有所不同，屬性值非常多，看下面
-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; /*只顯示不重合的地方*/
是不是一下就懵了？不用慌，可以看到上面有幾個值是 source-*，還有幾個是 destination-*開頭的，source 代表新內容，也就是上面繪制的圖層， destination 代表元內容，也就是下面繪制的圖層（在CSS中，前面的圖層會覆蓋后面的圖層），這里的屬性值其實是借用了Canvas 中的概念，具體可以查看 CanvasRenderingContext2D.globalComposite
記不住沒關系，實際開發可以逐一試驗[捂臉]。具體差異可以查看 codepen -webkit-mask-composite 屬性值演示
了解這個屬性后，上面的疊加問題就很簡單了，設置只顯示重合的地方就行了
.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*/
}
動態演示如下，這樣只會顯示互相重合的地方
可以查看在線實例 codepen 優惠券實現3
2個圓角的實現了，4個的就很容易了，畫4個圓就行，同樣利用遮罩合成可以輕易實現
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個角落各放一個圓*/
-webkit-mask-composite: source-in | destination-in ; /*chrome*/
mask-composite: intersect; /*Firefox*/
}
可以查看在線實例 codepen 優惠券實現4
上面的例子展示了2個圓角和4個圓角的效果，分別繪制了2個和4個圓，其實這是可以通過平鋪來實現的，只需要一個圓就可以。實現步驟如下
.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
}
/*也可以縮寫為*/
.content{
-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px;
}
效果就出來了，是不是很神奇？其實就是利用到了默認的 repeat特性，這里用一張動圖就能明白了
下面紅色邊框內表示視區范圍，也就是最終的效果，這里為了演示，把視線之外的平鋪做了半透明處理，移動表示 position 改變的過程
可以查看在線實例 codepen 優惠券實現5
同樣原理，4個圓角也可以采用這種方式實現
.content{
-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0);
-webkit-mask-position: -20px -20px;
}
/*也可以縮寫為*/
.content{
-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px;
}
實現原理演示如下
可以查看在線實例 codepen 優惠券實現6
6個圓角就需要改一下平鋪尺寸了。
.content{
-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0);
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 50%;
}
/*也可以縮寫為*/
.content{
-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
}
實現原理演示如下
可以查看在線實例 codepen 優惠券實現7
如果繼續縮小背景圖的尺寸，還可以得到最后的效果
.content{
-webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0);
-webkit-mask-position: -10px;
-webkit-mask-size: 100% 30px;
}
/*也可以縮寫為*/
.content{
-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px;
}
實現原理演示如下，其實就平鋪
可以查看在線實例 codepen 優惠券實現8
有些情況下可能單一的一層漸變繪制不了很復雜的圖形，這就需要用到反向鏤空技術了，其實就是上面提到過的遮罩合成 ，這里再運用一下
.content{
-webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
}
.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，表示減去，只顯示下方遮罩，重合的地方不顯示
可以查看在線實例 codepen 優惠券實現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*/
}
可以查看在線實例 codepen 優惠券實現10
有些同學覺得徑向漸變太復雜，實在是寫不出來，能不能用圖片代替呢？其實也是可行的。這里說的邊框遮罩指的是 mask-border , 目前還在 W3C 草案當中，不過有一個替代屬性 -webkit-mask-box-image
語法和概念和 border-image 非常相似，關于 border-image 可參考這篇文章 border-image 的正確用法，這里主要了解一下用法和效果
.content{
-webkit-mask-box-image: '遮罩圖片' [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
}
比如有一張這樣的圖片
SVG代碼長這樣，很多工具都可以導出來，實在不會可以直接找設計同學
<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>
這里需要轉義一下，可借助張老師的 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像素的固定區域，剩余部分平鋪或者拉伸*/
}
然后就實現了這樣一個形狀，同樣是自適應的
可以查看在線實例 codepen -webkit-mask-box-iamge 實現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;
}
可以得到這樣一個形狀，兩側的半圓被拉伸了
這時只需要設置平鋪方式 -webkit-mask-box-image-repeat , 這個和 border-image-repeat 是一樣的概念，有以下 4 個值
-webkit-mask-box-image-repeat: stretch; /*拉伸(默認)，不會平鋪*/
-webkit-mask-box-image-repeat: repeat; /*重復*/
-webkit-mask-box-image-repeat: round; /*重復，當不能整數次平鋪時，根據情況拉伸。*/
-webkit-mask-box-image-repeat: space; /*重復，當不能整數次平鋪時，會用空白間隙填充*/
幾種平鋪方式的差異如下
這里我們可以采用 round 或者 repeat
.content{
-webkit-mask-box-image: url("...") 20;
-webkit-mask-box-image-repeat: round;
}
可以查看在線實例 codepen -webkit-mask-box-iamge 實現2
以上一共介紹了12種繪制優惠券的案例，應該可以解決掉絕大部分這類布局的問題，這里總結以下幾點
關于兼容性，其實不考慮 IE 都沒有什么大問題，最后的 mask-border 目前只兼容 chrome 內核，移動端可放心使用
感謝閱讀，希望能對日后的工作有所啟發。
開發交互式用戶界面時，層級樣式表 (CSS) 非常強大。 CSS 有一些驚人的隱藏提示和技巧，可以用來改善你的網站的外觀。
在本文中，將介紹每個前端開發人員在開發出色且用戶友好的網頁時需要知道的一些很棒的 CSS 技巧。
可以在 CSS 中實現首字下沉。 它看起來很簡單。 比如下面顯示的圖像和代碼片段。
p:first-letter {
font-size: 3rem;
}為文本添加漸變使文本提供了令人驚嘆的顏色。
它還為你的設計添加了一些引人注目的功能。
要向文本添加漸變，它采用下面顯示的代碼片段的形式。
p {
font-size: 48px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}有了這個功能，我們可以在 SVG 中屏蔽圖像。 檢查下面顯示的圖像。
CSS 非常強大，為我們提供了許多可以實現的功能來實現此功能。
<svg>
<clippath id='clippath'>
/* Enter your svg here*/
</clippath>
</svg>
<style>
img:{
clip-path:url(#clippath)
}
</style>我們可以在 CSS 中使用圖像作為光標。 舉個例子，你想在你的內容上提供一個圖像光標。
要執行此操作，只需要提供如下代碼片段所示。
h1{
cursor:url("custom.gif"), auto;
}厭倦了普通無聊的列表？CSS 使列表的樣式成為可能。
要自定義列表標記，只需要對 CSS 進行編碼，如下所示。
::marker{
color:#f548r9;
text-shadow:2px 2px black;
}CSS 具有強大的提示偽元素，可用于設置視頻中的字幕樣式。
::cue{
color:green;
background:red;
}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>雖然我們可以使用 JavaScript 實現平滑滾動，但 CSS 使我們可以更輕松地在我們的網站中實現平滑滾動。
要啟用平滑滾動，需要將 smooth-behavior 設置為平滑。
檢查下面顯示的代碼段。
html{
scroll-behavior:smooth;
}圖像構成了網絡的很大一部分，可以使用過濾器來模糊圖像。 也可以使用過濾器屬性來模糊、飽和、添加亮度、添加其他屬性中的飽和度。
查看下面的代碼片段。
.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);
}看看下面顯示的圖像。 移動瀏覽器標題有多種顏色。 我們可以修改它并創建與我們網站的顏色主題相融合的顏色。
要更改或自定義移動瀏覽器標題中的默認地址欄，我們需要包含元標記，如下面的代碼片段所示。
<meta name='theme-color' content='#0575e6' />在元標記中，我們需要傳入兩個參數，即名稱和內容，我們指定我們想要的顏色。 您可以在十六進制代碼中包含顏色。
當想要構建交互式用戶界面時，層級樣式表非常強大。
這些只是我們可以在 CSS 中利用的一些提示和技巧。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
