解决margin塌陷的问题_使用CSS3 transform rotate 出现锯齿效果的解决办法

f8ea7c0cc348fdba0f05568160f724a7.png

今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate(旋转)锯齿的解决办法 transform:rotate在手机上显示有锯齿的解决方案大全

这篇文章仅讨论锯齿问题。

解决:

1. 在CSS3 transform属性后加入translateZ(0)

2. 手机上,利用元素外层容器的overflow:hidden; 加上元素margin:-1px;

3. 无需border时,元素border属性颜色设置成 transparent 或者和背景色相同


详细:

7acfaf56b364186ad0127f2149183aa2.png

代码如下:

<!DOCTYPE html>
<html>

<head>
    <ti
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值