用伪元素写移动端1px边框时想实现边角效果

做移动端页面时，又想用伪元素做真实1像素边框，又想有边角时，会发现只加一个border-radius时出来的效果边款并没有变成圆角，解决办法是加两个border-radius

<div class="white_wrap border b_all">
</div>
.white_wrap{margin:1.5rem 1.5rem 0 1.5rem;background-color:#fff;border-radius:6px;}
.border{ position:relative;}
.border:after{ content:""; position:absolute; left:0; top:0; right:-100%; bottom:-100%; -webkit-transform:scale(0.5);
 -webkit-transform-origin:0 0; pointer-events:none;}
.b_all:after{ border:1px solid #e3e4e5;border-radius: 12px;} //注意伪元素的圆角设成2倍

图中边框用了真实1px，在pc端看可能不太明显

时间： 2024-10-06 02:12:53

用伪元素写移动端1px边框时想实现边角效果的相关文章

移动端 1px边框 问题

https://segmentfault.com/a/1190000015736900 https://blog.csdn.net/yexudengzhidao/article/details/98480173 本文介绍了解决移动端1px边框问题的5种方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. 物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"

解决移动端1px边框问题的几种方法

1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 2.解决办法 a.使用border-image实现 根据需求选择图片,然后根据css的border-image属性设置.代

移动端1px 边框完整方案（四个方向）

使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l  左右方向 t  垂直方向 w 上下出现边框则为width反之为height(边框在方向上的长度) b 上出现边框则为bottom x 为哪个方向上的缩放 具体对应关系如下 face==top && (l=left t=top b=bottom w=width x=scaleY) face==bottom

伪类实现 移动端1px 细线

/*手机端实现真正的一像素边框*/ .border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px { position: relative; } /*线条颜色 黑色*/ .border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-

移动端1px边框的两种解决方案

方案一:scss 方案二:stylus 原文地址:https://www.cnblogs.com/jsjx-xtfh/p/9902585.html

CSS ::before 和 ::after 伪元素另类用法

原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. 一 基本语法 在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将

大放异彩的伪元素——可以做什么？(转)别人分享的文章，发现很不错，果断收藏了

伪元素:before 和 :after可以做的东西是相当惊人的.对于页面上的每一个元素,你拥有了两个更灵活的.而且可以完成其它HTML元素都能完成的东西的元素.它们让一大堆有趣的设计成为可能,而且不会对你的语义标签产生负面影响.这里有一大堆关于这些有趣的效果的示例,你想看的话就接着往下看吧. 多重背景画布 因为你可以将伪元素相对于它们的父类元素绝对定位,你可以想象成每个元素都有两个额外的层.Nicolas Gallagher向我们展示了它的很多种应用,包括多边界.模拟CSS3多重背景.等高栏等.

你所不知的 CSS ::before 和 ::after 伪元素用法

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. Creative Button Styles 一 基本语法 在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用