使用affter伪类实现1px 边框

CSS单位与视口比例

最新推荐文章于 2024-07-05 17:35:21 发布

原创最新推荐文章于 2024-07-05 17:35:21 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用百分比设置根元素字体大小的方法，使得1rem等于10px，便于响应式布局的设计。通过具体代码示例展示了如何实现底部1像素线条的效果。

设置根元素的字体为62.5%,1rem 等于10px;

html{

font-size:62.5%

}

Bottom1px {

width: 100%;

height: 10rem;

position: relative;

}

.Bottom1px:after {

content: '';

display: block;

position: absolute;

width: 100%;

left: 0; bottom: 0;

height: 1px;

background-color: #c8c7cc;

transform: scaleY(0.5);

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

timebeign

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

详解移动端Html5页面中1px边框的几种解决方法

09-22

解决方案之一是使用伪类（如:before或:after）加上CSS的transform属性来实现。基本思路是通过给元素添加伪元素，并使用transform属性的scaleY函数将伪元素的尺寸缩小一半。这样原本1px的边框在视觉上就能够显示为0.5...

CSS伪类对象before和after的用法实例详解

09-25

在这个例子中，`::before` 和 `::after` 被用来创建瓶子的顶部和瓶颈部分，通过调整它们的位置、边框和阴影效果，实现了瓶子的立体感。需要注意的是，`::before` 和 `::after` 伪元素在早期的Internet Explorer...

参与评论您还未登录，请先登录后发表或查看评论

通过伪类设置单边框

HYQ_java的博客

01-19

557

<div> <div class="title">标题</div> </div> .title { padding-left: 30rpx; font-size: 28rpx; } .title:before { content: " "; position: absolute; //定位边框的位置 top: 25%; left: 0; height: 60%; width: 8r.

利用伪类和tranform实现1px 边框border

gxr的博客

11-13

630

.border-1px{ position: relative; } .border-1px:after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #ccc; content: ' ';...

CSS—通过伪类解决1PX问题

麻球科技

05-24

427

CSS—通过伪类解决1PX问题

关于移动端1px线处理和伪类组合使用

zhongzai2010的专栏

12-14

828

问题：前端UI工程师有强迫症，非得把手机端的线条弄的最细。分析：由于移动端页面普遍不允许缩放，所以设置viewport=1相关的scale也都设置为1，倒置在手机浏览器的显示时其实是有devicePixelRatio=2 或=3 这样的放大的，所以普通代码border=1px，在设备上实际上会显示为2px或3px。看上去确实比较粗壮。解决：参考网上实现，最终选择了使用：before af

给div 元素增加伪元素边框（比当前宽高大或小）

title

06-01

360

【代码】给div 元素增加伪元素边框（比当前宽高大或小）

不同屏幕分辨率实现 1px 边框

qq_39454432的博客

04-28

705

不同屏幕分辨率实现 1px 边框

50使用after伪类解决高度塌陷问题

quanxiaobai_的博客

06-09

709

重现高度塌陷问题 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

8种方案解决移动端1px边框的问题

最新发布

林恒的博客

07-05

1212

css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。

伪类的用法及盒子设置边距

Ospaceman的博客

02-26

532

CSS 盒模型

使用伪类显示右边框

暗透了更能看到星光

10-23

767

此处导航使用for循环右侧border如果使用border-right 显示的话，需要添加padding 但是添加padding的话底部黄色线条会变长不符合要求此时可以使用伪类 .navItem:not(:last-child)::after{ content: ""; position: absolute; display: inline-block; top: 36rpx; right: -20rpx...

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

weixin_30301183的博客

11-12

147

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

使用伪类处理移动端1px（1像素）边框问题

dengzhuanhu2252的博客

08-21

257

.box{ position: relative; border: none; } .box:after{ // 单边框 content: ''; position: absolute; bottom: 0; background: #DCDCDC; width: 100%; height: 1px; -web...

用css伪类：before,:after前后插入线

weixin_33711641的博客

11-30

3165

2019独角兽企业重金招聘Python工程师标准>>> ...

affter before 的使用列子

panhuanqin的博客

06-17

312

css样式

weixin_72718348的博客

07-19

851

css

CSS使用伪类控制边框长度的方法

H5爱好者

10-11

1732

需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果，并且使用起来很方便，下面通过本文给大家介绍CSS使用伪类控制边框长度的方法，感兴趣的朋友一起看看吧。我们需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果，并且使用起来很方便。上面都是页面的基础样式，想要实现边框的长度控制，就需要使用。这里使用的是微信小程序编写的，所以标签会是。最后两句是控制边框居中的问题。