HTML文字icon，Webdings字體和Wingdings字體
Wingdings介紹：Wingdings 是一個符號字體系列，它將許多字母渲染成各式各樣的符號，用途十分廣泛。于1997年發表，搭載在其后的 Microsoft Windows 視窗系統內，使用很簡單，值得注意的是...
袁志蒙 2023-06-12 1948次瀏覽
前端
HTML5 <dialog> 標簽
dialog 是HTML5新增的語義化雙標簽，用于展示一個交互式的模態對話框。它既可以創建模態對話框（用戶不能與打開對話框的頁面進行交互，直到對話框關閉，模態對話帶半透明背景...
袁志蒙 2023-06-10 1883次瀏覽
HTML5標簽ruby實現對中文添加拼音
ruby標簽在東亞使用，顯示的是東亞字符的發音。將 <ruby> 標簽與 <rt> 和 <rp> 標簽一起使用： <ruby> 元素由一個或多個需要解釋/發音的字符和一個提供該信息的 <rt> 元素組成，還包括可選...
袁志蒙 2023-05-17 1628次瀏覽
css媒體查詢prefers-color-scheme實現自動適配系統主題
prefers-color-scheme 是什么？W3C 在 2020 年 7 月 31 日發布的 Media Queries Level 5 標準草案 中提到了新的屬性 prefers-color-scheme，網頁現在可以通過條件規則組來獲取瀏覽器宿系統的暗色模式狀態并應用了。也就是說，現在我們可以很簡單地實現...
袁志蒙 2023-05-14 1557次瀏覽
取色器 EyeDropper API
使用取色器 EyeDropper API 我們可以在屏幕上拾取顏色，就跟ps的吸管功能一樣。這是一個實驗性的API，從Chrome 95才開始支持的。我們就來試用一下。首先，還是要判斷一下瀏...
袁志蒙 2023-05-11 1424次瀏覽
css3實現文字穿透效果
最近看到幾個css新屬性，突發奇想的可以實現一個比較有意思的效果，我們叫做文字穿透效果吧，主要用到了幾個css屬性：# 文字設置成透明 color: transparent; # 文字描邊 text-stroke: 1px #fff;
袁志蒙 2023-05-09 1195次瀏覽
利用css3的filter(濾鏡)屬性制作交融效果
交融效果:方式一: 元素設置filter:blur模糊,元素父級設置contrast時,會實現模糊元素相交產生水滴交融且相交部分變清晰的效果即:進行動畫的圖形的父元素需要是被設置了filter:...
袁志蒙 2023-04-23 1497次瀏覽
CSS基本布局——grid布局（二）
經過上一篇文章，我們已經對grid布局有了一些基本的認識，但grid布局實在是太強大了，我們繼續來學習它：justify-items和align-items屬性：設置單元格的水平和垂直方向對齊方...
袁志蒙 2022-11-25 1613次瀏覽
CSS基本布局——grid布局（一）
grid布局簡介：Grid布局是將容器劃分成“行”和“列”，產生單元格，然后指定“項目所在”的單元格，可以看作是二維布局，設置 css的 display:grid 或 display:inline-gri...
袁志蒙 2022-11-25 1533次瀏覽
display:inline-block換行問題
最近在寫網站樣式的時候，設置了子元素的寬度，目的讓其并排展示一行，之前的都是用float寫，沒有遇到問題，今天使用了inline-block，卻換行了，打開調試模式...
袁志蒙 2022-07-25 1545次瀏覽
