hn-failte's blog hn-failte's blog
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
    • 小程序
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
    • 圆角边框锯齿问题
    • 各国语言正则
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

hn-failte

前端cv仔
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
    • 小程序
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
    • 圆角边框锯齿问题
    • 各国语言正则
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Webpack

  • React

  • JavaScript

  • Vue

  • 混合开发

  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • 小程序笔记
    • JS设计模式总结笔记
    • safari 兼容问题笔记
    • 1px圆角边框锯齿问题
    • 各国语言正则
  • 小程序

  • 前端
  • 学习笔记
hn-failte
2023-10-26

1px圆角边框锯齿问题

# 1px圆角边框锯齿问题

尝试以下方案:

1、将border改为box-shadow。

2、改为outline。

3、overflow改为visible。

4、改为2px,同时容器尺寸都放大为原来的两倍,再分别通过scale(0.5)和matrix(0.5, 0, 0, 0.5, 0, 0)缩小为原来的50%。需要解决布局问题。

5、添加一个比目前元素宽高各多2px的伪类,设置背景色为边框色。需要解决布局问题。

6、改为边框图片。

编辑 (opens new window)
#CSS
上次更新: 2024/01/26, 18:22:27
safari 兼容问题笔记
各国语言正则

← safari 兼容问题笔记 各国语言正则→

最近更新
01
safari 兼容问题笔记
01-26
02
electron 日志接入
12-26
03
vue3-template-compile
11-24
更多文章>
Theme by Vdoing | Copyright © 2017-2024 hn-failte | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式