神奇的css
21篇文章 · 0订阅
  • 解决长文本动态展示 tooltip 的优雅方式
    开发中遇到文字过长的场景，可以使用CSS截断文字或添加tooltip来解决。为了更友好，可以根据文本和容器宽度动态添加 toolti。核心是比对文本和容器宽度，监听宽度和文本变化。最后封装为组件使用。
    前端
  • Bros！使用 focus 和 blur 事件时别忽略了这一点！
    前言 最近小伙伴又遇到一个需求，那就是给复选框选中时添加一个边框样式，大致如下： 原本的效果： 现在需要的效果： 这个外边框的隐藏时机为： 复选框未选中 点击 复选框内容外 的区域 小伙伴很快就完成了
    前端 Vue.js JavaScript
    Bros！使用 focus 和 blur 事件时别忽略了这一点！
  • 裁剪的3种方式，CSS 如何隐藏移动端的滚动条？
    在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的 但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下 你可能想到直接设置滚动条样式就可以了，就像这样 目前来看好像没什么问题，但在某些版
    前端 CSS
    裁剪的3种方式，CSS 如何隐藏移动端的滚动条？
  • 实现tabs圆角及反圆角效果
    css实现tabs圆角切换效果，使用伪元素、border-radius、box-shadow叠加处理。
    前端
  • 实现tabs圆角及反圆角效果（PLUS）
    先看UI稿 思考 刚开始想着拿两个圆角来拼，但发现中间接触过渡效果很差 需要丝滑的话，想到贝塞尔曲线/正弦曲线，但这样太麻烦，需要用canvas来画 图形计算器 贝塞尔曲线 最后想到用斜边加圆角来拼，
    前端
  • 别整一坨 CSS 代码了，试试这几个实用函数
    CSS比较函数从2020年4月就开始支持了，我喜欢使用这些函数，但最喜欢的是 clamp()，它也是我最常用的一个。在这节课中，我们详细来看下这些比较函数。 Clamp(), Max(), 和 Min
    Vue.js
    别整一坨 CSS 代码了，试试这几个实用函数
  • CSS画多边形及clip-path: polygon()属性原理
    首先用以下代码画出一个正方形。 二、引用clip-path: polygon()属性。 效果如图： 接下来介绍一下clip-path: polygon()的原理： 括号内用逗号隔开了四组数据
    CSS
  • TailwindCSS的使用，看这一篇就够了！
    安装 以下方法是Vite + Vue模式下的安装方法，其他脚手架与框架的使用同理。 创建项目 安装必要依赖 Vite创建的项目默认集成了PostCSS，而TailwindCSS本身就是一个PostCS
    前端 CSS PostCSS
  • 出于好奇，我get了一个新的CSS知识🍾
    大家在查阅Element UI文档的时候，是否发现下面这个效果👇 好家伙，这个效果该怎么实现呢？我的思路是设置背景图为白色和透明相间，这样底下的图片就能穿透部分上来，形成一个类似毛玻璃的效果
    前端 CSS 掘金·金石计划
    出于好奇，我get了一个新的CSS知识🍾
  • 掌握sass这些技能，帮助提升开发效率
    先放一张logo镇楼，emmm... CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 We…
    SCSS
    掌握sass这些技能，帮助提升开发效率