用伪元素写移动端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 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用