文章
73
标签
4
分类
18
主页
YianNotes
CSS 描边效果
返回首页
搜索
主页
CSS 描边效果
发表于
2025-10-13
|
更新于
2026-04-16
|
CSS
|
总字数:
73
|
阅读时长:
1分钟
css描边有很多种实现方式,svg是我用过比较好用的效果,其次是叠起来的形式,上层卡片压住下层卡片 下层卡片设置上渐变 就有渐变卡片的效果了
有时间完善的写上几个实例
文章作者:
Yian
文章链接:
https://yian.cyou/CSS%20%E6%8F%8F%E8%BE%B9%E6%95%88%E6%9E%9C/
版权声明:
本博客所有文章除特别声明外,均采用
CC BY-NC-SA 4.0
许可协议。转载请注明来源
YianNotes
!
赞助
微信
支付宝
上一篇
Css 之Grid布局
1. Grid 到底解决什么问题在网页里,布局工具大致有三类思路: 普通文档流:元素从上往下排 Flex:一维布局,主要处理“一行”或者“一列” Grid:二维布局,同时处理“多行 + 多列” ([MDN Web Docs][1]) 所以一句话记住: Flex 适合排一条线,Grid 适合排一张网。 例如: 导航栏一排按钮:Flex 更顺手 整个页面分头部、侧边栏、主内容、底部:Grid 更合适 商品卡片九宫格:Grid 更合适 仪表盘模块布局:Grid 更合适 2. Grid 的核心思维Grid 的本质就两步: 先把父元素定义成网格容器 再定义列、行,以及子元素怎么摆进去 最基础的写法: 123.container { display: grid;} 只要写了这个,.container 就成了 grid container,它的直接子元素就变成 grid items。Grid 是通过 display: grid 启用的。 3. 最小可运行示例先看最简单的例子: 123456<div class="container&quo...
下一篇
富文本编辑器
Concept list 获取Selection Selection 对象 Document execCommand 已废弃 Range 对象 Lib Slate tiptap prosemirror Quill lexical Selecion 和 Range 1️⃣ 基本概念 概念 说明 Selection 表示用户当前“选中了什么”的对象,是浏览器提供的接口。通过 window.getSelection() 获取。 Range 描述“从哪到哪”的精确范围对象,是底层数据结构。用于实际操作 DOM。 2️⃣ 核心关系 🔗 Selection 持有 Range,Range 定义选区内容 Selection 是“容器”或“视图” → 用户看到的高亮 Range 是“数据”或“工具” → 程序用来操作的内容 一个 Selection 可以包含多个 Range(但大多数浏览器只支持一个) 💡 不是 Selection 创建 Range,而是: 用户操作 → 浏览器创建 Range → 放入 Selection 程序创建 Range → ...
Yian
光荣在于平淡,艰巨在于漫长
文章
73
关注我
待办清单
0
总任务
0
已完成
0
待完成
全部
待完成
已完成
最新文章
Proffing
2026-04-16
关于agent的一些思考
2026-03-06
数学
2026-03-01
OpenClaw 的一些内容拆解
2026-02-25
Work中操作dom的办法之 partytown
2026-02-10
搜索
数据加载中