css媒體查詢prefers-color-scheme實現自動適配系統主題
prefers-color-scheme 是什么？W3C 在 2020 年 7 月 31 日發布的 Media Queries Level 5 標準草案 中提到了新的屬性 prefers-color-scheme，網頁現在可以通過條件規則組來獲取瀏覽器宿系統的暗色模式狀態并應用了。也就是說，現在我們可以很簡單地實現...
袁志蒙 2023-05-15 1558次瀏覽
“css”的結果，共36條
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 1546次瀏覽
position: sticky 失效問題
css的 position 值中，有一個非常有用的值：position: sticky , 通常會被用于各種吸頂，吸底，吸邊的效果中，最近遇到一些 position: sticky 失效的場景，所以總結了一下...
袁志蒙 2022-04-10 2071次瀏覽
純css實現步驟進度條效果
當我們收到這樣的步驟進度條的需求時，我們之前的做法是用圖片作為背景圖，才可以做出這樣的效果，現在我們只需要通過css就可以完成這樣的...
袁志蒙 2021-06-22 4486次瀏覽
css+jquery實現美化的switch開關
沒有用插件，利用label + radio特性做了一個switch開關，代碼簡潔易懂，可以集成到項目里，美化radio，完整代碼分享...
袁志蒙 2021-04-19 3814次瀏覽
YzmCMS企業站模板（整站帶數據）
模板名稱：YzmCMS企業站模板（整站帶數據）本套采用YzmCMS最新版開發的模板，這款模板使用范圍廣，不僅僅局限于一類型的企業，網站建設、營...
袁志蒙 2020-09-14 4303次瀏覽
