tag Css

標籤
貢獻785
962
06:37 AM · Oct 27 ,2025
vitaly-friedman 頭像 u_15469972 頭像 nanchengfe 頭像 louis-lazaris 頭像 temani-afif 頭像 u_16164933 頭像 u_17534189 頭像 u_17569005 頭像 adrian-bece 頭像 andy-clarke 頭像 u_13934709 頭像 brecht-de-ruyte 頭像

@Css / 博客 RSS 訂閱

munergs 頭像

munergs - 純CSS實現linear-gradient的漸變動畫效果

話不多説，先上效果圖 受制於網站的容量，最多隻能上傳4MB的動圖，所以我調快了動畫的速度，縮短了動圖的時間，實際上動畫是很緩和的。 説到動畫，眾所周知，漸變是不能夠使用通過keyframes實現動畫過渡效果的，只會突然的改變顏色。 例如，如果關鍵幀代碼如下 @keyframes test { 0%{ background: linear-gradient(60deg, rgba

animation , Css , css3動畫

收藏 評論

tianmiaogongzuoshi_5ca47d59bef41 頭像

天渺工作室 - css實現一個簡單的 閃爍效果

純css閃爍效果demo 具體速度和顏色自己可以自己調 div class="father-box" div class="header-box" /div /div @keyframes test { from { opacity: 1.0; } 50% { opaci

Css , css3動畫 , html5

收藏 評論

thosefree 頭像

搬不要錢的磚 - Ionicons - Ionic 出品的免費開源、高性能圖標庫，適用於 web / APP / 桌面應用

Ionic Framework 內置的圖標庫，免費開源、數量多，性能還不錯，無論是開發還是設計，都是一個優質的資源。 關於 Ionicons Ionicons 是一個完全開源的圖標集，是知名混合開發框架 Ionic Framework 內置的圖標庫，包含 1300 個為 Web / iOS / Android 和桌面應用程序專門定製的圖標。Ionic Framework 是一個跨平台的混合

ionic , iconfont , Css , svg

收藏 評論

nanchengfe 頭像

南城FE - 那些你不知道的 CSS 自定義形狀網格佈局

本文翻譯自 CSS Grid and Custom Shapes, Part 1，略有刪改 在正常的開發中，我們會遇到很多元素塊排列對齊的需求，如九宮格抽獎，多張圖片上傳後等分佈局預覽，微信朋友圈多張圖片展示等。這都是正常的正方形很規整的佈局。 如下所示，如果圖像不是完全正方形，而是形狀像六邊形或菱形怎麼辦？我們怎麼做呢。事實上，我們將結合我們已經研究過的 CSS 網格技術，並加入一些 CSS c

佈局 , css3 , Css , HTML , 前端

收藏 評論

yishidemeihao_5b9ce075877c9 頭像

遺失的美好灬 - Flex 佈局教程：語法篇

網頁佈局（layout）是 CSS 的一個重點應用222。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地

flex , Css

收藏 評論

laomao_5902e12974409 頭像

來了老弟 - CSS Grid Layout(網格佈局)

CSS 有一些屬性經常被用來解決佈局問題：如（浮動float、定位postion）這些比較 hack 的方法經常會給頁面遺留下一些問題。 彈性盒子Flexbox是一個非常好的佈局工具，網格佈局 CSS Grid Layout 是最新、更強大的佈局方式。本文就來簡單介紹一下什麼是網格佈局。 網格佈局(CSS Grid Layout) 網格佈局是二維的佈局系統，和過去常用的佈局方式相比完全改變

佈局 , Css

收藏 評論

xboxyan 頭像

XboxYan - 快速瞭解 inert 屬性

歡迎關注我的公眾號：前端偵探 介紹一個全新的、和用户行為息息相關的屬性：inert。 HTMLElement.inert - Web APIs | MDN (mozilla.org) 有了這個屬性，可以更加輕易地控制很多交互行為，花幾分鐘瞭解一下吧 一、inert 是什麼？ inert是 HTMLElement 的一個布爾屬性，意為"惰性"，簡單來説，可以禁用一切交互，包括鼠標點擊、選中、拖

dom , Css , HTML , 前端 , html5

收藏 評論

tiantian_5ada7e81e50d7 頭像

uccs - 遲遲沒學會grid，是因為你沒理解flex

我先問 2 個問題： 你是不是用主軸-交叉軸/輔軸/副軸的概念理解 flex 你是不是也用這個概念去理解 grid 如果你是用這種方式理解的 flex，那聽我慢慢道來 今天我打破你對 flex 的理解 打碎對 flex 理解 display: grid 和 display: flex 默認方向都是 row，為什麼他們表現出來的形式不一樣呢？ display: flex： 效果 di

flex , grid , flexible , Css , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 居中佈局：水平居中和垂直居中

居中佈局在實際場景中很常見，在面試當中也經常會被考察。 以下分別是水平居中和垂直居中常用的樣式。 水平居中 margin: 0 auto; + width 應用於塊級元素居於容器中間 若節點不是塊級元素，需聲明display: block 若節點寬度已隱式聲明則無需顯式聲明width div class="h-c1" p談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。/p /div

佈局 , 面試 , Css , 前端

收藏 評論

xiaoxxuejishu 頭像

小X學技術 - Y 分鐘速成 AngularJS

源代碼下載： learnangular-cn.html AngularJS 教程 AngularJS 1.0 版在 2012 年發佈。 Miško Hevery, 一位 Google 員工， 從 2009 年開始開發 AngularJS。 結果發現這個想法很好，從而該項目現在也被 Google 官方所支持了。 AngularJS 是一個 JavaScript 框架。它可以通過一個 "s

angularjs , Css , HTML , 前端 , Javascript

收藏 評論

zzd41 頭像

superZidan - 使用 Socket.io 和 React 開發一個聊天應用

這篇文章是關於什麼的 相信大家對於 web 版的線上聊天室都不陌生，這篇文章主要講的就是如何使用 Socket.io 和 React 開發一下簡單的線上聊天應用。 所謂線上聊天應用，就是你給一個人或者一個羣發送一條消息，他們可以看到這條消息並且可以回覆。既簡單又複雜。 開發一個聊天室應用，你需要在新信息來到的時候及時的感知到。 通常來説，為了獲得服務端的信息，我們需要發送一個 HTTP 請求。但是

socket.io , react , node.js , Css , Javascript

收藏 評論

jsliang 頭像

jsliang - CSS 實例系列 - 01 - Tab 滑動門

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 本 CSS 系列文章： 主推學以致用。結合面試題和工作實例，讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。 主推純 CSS。儘可能使用 HTML + CSS 完成學習目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識，適合新人學習 + 大佬複習。 如果文章在一些細節

實例 , Css , css3動畫 , 前端

收藏 評論

jsliang 頭像

jsliang - CSS 實例系列 - 04 - Dropdown 下拉麪板

Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Dropdown 下拉麪板 本期將和小夥伴們探討： √ 通過精簡結構，講解 HTML 和 CSS 搭配如何實現 Dropdown 下拉麪板 本實例的代碼地址： Github - all for one 碼上掘金 - 04 - Dropdown 下拉麪板 視頻講解 一 前言 本 CSS 系

css3 , Css , css3動畫 , 前端 , html5

收藏 評論

shuirongshui 頭像

水冗水孚 - 彈性盒佈局之從左往右，空間不夠換行繼續從左往右（從左往右，從上往下，between效果）

本文記錄一個css小技巧，不難，不過可能自己一時間想不到 問題描述 我們有這樣的需求，大容器中有很多的盒子，從左往右排列，空間不夠的話，然後換行，繼續從左往右排列，如下效果圖 看到這樣的需求，我們第一時間想到的就是彈性盒佈局，給大容器開啓彈性盒、允許換行，兩側分佈，於是會寫下如下代碼： display: flex; flex-wrap: wrap; justify-content: space-

佈局 , Css

收藏 評論

jdcdevloper 頭像

京東雲開發者 - “前端”工匠系列（一）：合格的工匠，究竟該搞什麼 | 京東雲技術團隊

作者：京東零售劉偉東 此文為系列文章第一篇，為淺嘗輒止的引入，目的是為了讓前端從業人員及非從業但是對此領域感興趣的人對於”前端“是幹什麼的這個話題有個無門檻的瞭解。 “前端職能是什麼” 説起"前端"，維基百科對這個技術角色的定位是“前端（英語：front-end）和後端（英語：back-end）是描述進程開始和結束的通用詞彙。 前端作用於採集輸入信息，後端進行處理。 計算機程序的界面樣式，視

vue.js , 編碼 , Css , 前端 , Javascript

收藏 評論

esunr 頭像

EsunR - 解決基於 Webpack 構建的 Vue 服務端渲染項目首屏渲染樣式閃爍的問題

前言 當我們使用 Webpack 搭建一個基於 Vue 的服務端渲染項目時，通常會遇到一個很麻煩的問題，即我們無法提前獲取到當前頁面所需的資源，從而不能提前加載當前頁面所需的 CSS，導致客户端在獲取到服務端渲染的 HTML 時，得到的只有 HTML 文本而沒有 CSS 樣式，之後需要等待一會兒才能將 CSS 加載出來，也就是會遇到『樣式閃爍』這樣的問題。 如果你想要完整 SSR 實踐，可以參考：

服務端渲染 , webpack , Css , ssr , 前端

收藏 評論

tangzhiyuan 頭像

唐志遠 - 一文吃透 CSS Flex 佈局

原文鏈接：一文吃透 CSS Flex 佈局 教學遊戲 這裏有兩個小遊戲，可用來練習 flex 佈局。 塔防遊戲 送小青蛙回家 Flexbox 概述 Flexbox 佈局也叫 Flex 佈局，彈性盒子佈局。 它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來，更簡便、完整、響應式地實現各種頁面佈局。 它的主要思想是使父元素能夠調整子元素的寬度、高度、排列方式，從而更

flex , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - 如何使用CSS Grid 居中 div

本文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有刪改 在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用於任何類型的元素。 初始化 我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML： artic

佈局 , css3 , Css , 前端

收藏 評論

humi 頭像

heruns - React Hook 和 SCSS 結合的響應式佈局方案

背景 公司中有多個項目需要同時開發 PC 端和 H5 端，大部分地方邏輯和交互比較類似，主要是樣式上有些區別。為了更好地複用代碼、提高開發效率，經過一段時間的實踐後，我們總結出這套 React Hook 和 SCSS 結合、px 和 vw 共存的響應式佈局方案。 基礎代碼 創建項目 首先，我們來創建一個項目，這裏我用的是 Create React App，選擇了 typescript 模板，通過以

響應式佈局 , react , scss , Css , hook

收藏 評論

chencaize 頭像

點墨 - VSCode 樣式格式化

在使用VSCode的插件進行less文件格式化的時候，發現會存在問題。 index.less @prefix: test; @{prefix}-input{ color :red; width : @base-with; height : @base-height; } @base-size : 10px; @base-with : @base-

less , vscode插件 , scss , visual-studio-code , Css

收藏 評論

shoyuf 頭像

shoyuf - 可能是東半球最好的 Web Font 優化方式「中文網字計劃」

中文網字計劃是收錄眾多中文字體並通過 Web Font 的形式為 網站開發者 提供美麗字體的項目。 中文網字計劃致力於在互聯網中提供更加便捷實用的全字符集中文渲染方案。中文網字計劃通過精巧設計的字體分包方式，將龐大的字體文件切割為多個小型靜態分包部署於雲端，在全網領域內都可快捷、穩定地進行加載。為提高中文字體在網絡中的流通體驗而努力！ 為什麼要使用獨特的中文字體 提高藝術風格的表現力

字體 , Css , 前端

收藏 評論

u_16099188 頭像

互聯網小思悟 - 安裝wkhtmltopdf

服務器安裝wkhtmltopdf 下載rpm包至本地 https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox-0.12.6-1.centos8.x86_64.rpm 上傳rpm包至服務器 scp -r w

Spring Boot , 服務器 , pdf , Css , 前端開發 , HTML , Python

收藏 評論

beckyyyy 頭像

beckyyyy - 對BFC的理解

在前端的面試中，相對JavaScript而言，CSS佈局方面考察的內容會相對少一些，其中BFC是佈局樣式方面常考的一個考點。 什麼是BFC BFC，全稱為Block Formatting Context，翻譯過來即塊格式化上下文。 之前在其他文章中看到的説明是，網頁上一個獨立且隔離的渲染區域。現在呢，我稍微查閲了一些官方的信息。 在瞭解BFC之前，我們需要先了解一些其他概念： 包含塊（contai

佈局 , bfc , Css , HTML , 前端

收藏 評論

winnn 頭像

Winn - 純css編寫開關按鈕點擊切換

效果圖預覽： 完整代碼如下： !DOCTYPE html html head title純css編寫開關按鈕點擊切換/title style type="text/css" #toggle-button{ display: none; } .button-label{ position: relative; displa

Css , 程序員 , css3動畫 , 前端 , html5

收藏 評論