伪类写边框。1像素的一般.5px

最新推荐文章于 2022-05-24 09:10:22 发布
最新推荐文章于 2022-05-24 09:10:22 发布
阅读量718 收藏
点赞数
分类专栏： css 伪类边框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webZRH/article/details/81738463
版权

:after{

content: "";

position: absolute;

bottom: 0;

left: 28rpx;

width: 722rpx;

border:1px solid #dddddd;

-webkit-transform:scaleY(0.5);

transform:scaleY(0.5);

-webkit-transform-origin:0 0;

transform-origin:0 0;

box-sizing:border-box;

}

个人看法
关注
专栏目录
一像素边框的实现
景洪的博客
07-30 1179
給这个div添加底部一像素边框，<div class='box border-1px'>//首先添加普通的底部一个像素的边框 .box position: relative &:after content: ' ' display: block position: absolute bottom: 0 left: 0 width: 100%
伪类+缩放 实现1像素的下边框（使用less）
weixin_44771007的博客
05-15 522
如果直接给一个1像素的border，在pc端浏览是真的1像素，如果在手机端浏览，就不是1像素，因为手机端的物理像素是设备像素的两倍，所以在375像素下的手机显示的是2像素的border（设计稿一般是750） 这里把伪类和缩放的样式放在两个不同的less文件中 伪类：主要是给父元素添加after伪类，伪类绝对定位来实现 /*mixin.less 样式根据自己的需求来写*/ .border-1px(@color) { position:relative; &::after { conte
伪类实现下边框
caimaomaocai的博客
09-25 4867
.JTBabs.active:before { content: ''; position: absolute; left: 20px; bottom: 0px; right: 20px; border-top: 3px solid red; }   把要加的下边框的那个元素设置为相对定位 position:relative;...
1像素(px) 图片
weixin_33724570的博客
11-04 877
为什么80%的码农都做不了架构师？>>> ...
关于jQuery用css伪类:after为容器添加边框或去掉边框的问题
weixin_42284117的博客
07-26 1380
今天碰到一个问题是要去掉一个div的border，用border：none;没有用,发现border是用伪类加上去的，如下： .screenBox::after { border-bottom: 1px solid #E1E2E6; } 直接用jquery改变css没有用，还要用伪类方法去掉，如下： $('.screenBox').append("<style>.mCommon_bas...
通过伪类设置单边框
HYQ_java的博客
01-19 501
<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.
详解移动端Html5页面中1px边框的几种解决方法
09-22
由于不同移动设备的像素密度不同，直接使用1px定义的边框在视觉上可能会显得比设计稿中的边框更粗。这主要是因为移动设备中的物理像素和CSS像素的比值不同，导致边框的视觉效果被放大了。 在设计师指出边框过粗的...
移动端Html5 1px边框精细处理方法解析
在移动端HTML5页面开发中，1px边框的显示问题是一个常见的挑战，尤其是在不同设备和浏览器上。...通过伪类、transform、边框图片和box-shadow等技术，可以在大多数情况下实现设计师期望的1px效果。
React 移动端`1px`像素边框
Zeng_Z_H的博客
02-23 214
1.准备hairline.scss文件 2.给需要的类名，添加样式 其他资料 参考 antd-mobile 的实现 实现原理 hairline.scss 文件具体的代码如下 // 参考： https://github.com/ant-design/ant-design-mobile/blob/v2/components/style/mixins/hairline.less // 原理： 伪元素 + transform 缩放 // 伪元素::after或::before是独立于当..
css实现0.5像素的边框的示例代码
09-24
`对伪元素进行缩放，将其缩小为原来的50%，这使得原本1像素的边框在视觉上变为0.5像素。 7. 最后，通过调整`transform-origin`属性，以元素的左上角为基准进行变换。 为了适应不同浏览器的兼容性，代码中使用了多个...
一像素边框实现
二熊不是熊二的博客
03-31 511
下文部分引用于移动端1像素边框问题，这篇文章写得很详细，值得一看。 为什么移动端一像素边框和pc端不一样？ 其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用javascript中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel...
使用伪类显示右边框
暗透了更能看到星光
10-23 689
此处导航使用for循环 右侧border如果使用border-right 显示的话，需要添加padding 但是添加padding的话底部黄色线条会变长 不符合要求 此时可以使用伪类 .navItem:not(:last-child)::after{ content: ""; position: absolute; display: inline-block; top: 36rpx; right: -20rpx...
html一像素等于多少px,pt和px换算(一pt等于多少像素)
weixin_42450002的博客
06-03 7460
pt是绝对长度，px是相对的， 我现在创建了一个图片A,A的分辨率为1400px .px:pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便；pt:point，是一个标准的长度单位，1pt=1/72英寸，用于印刷业，非常简单易用；字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；pt就是poin...
html 表格边框1像素,一像素边框表格的几种实现方法
weixin_33378570的博客
06-03 1931
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？简单谈下现代一像素表格的实现一、基础铺垫：① table元素的部分属性(针对于本话题)：12bgcolor="#ffffff" bordercolordark="" bordercolorlight="" >border 表格内单元格边框的宽度 [STF][^hello][^hello]:注：DTD指示此属性允许在...
1像素边框问题
weixin_43905830的博客
04-22 1090
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。 一、像素的理解 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更...
html一像素等于多少px,html – CSS像素是否真的是绝对的单位？那是1英寸= 96px的真？...
weixin_42647395的博客
06-03 353
根据您已经链接的CSS Values and Units Module部分,稍微延伸一下,有两个不同的实现可以应用于CSS：For a CSS device, these dimensions are anchored eitheri. by relating the physical units to their physical measurements, orii. by relating ...
（三）在不同的设备上实现1像素边框
感恩、奋进、自信
04-30 559
在不同的设备上实现1像素边框，这是因为不同的设备的设备像素比不同，通常有1，1.5，2等，因此利用媒体查询和元素的伪类去实现在不同的设备像素比上实现1px的边框1、首先，在stylus文件夹下新建一个文件mixin.styl，内容如下border-1px($color) position:relative //让伪类相对于他定位，所以设置display:relative &amp;:af...
vue饿了么--- 一像素边框--border-bottom的实现（伪类加缩放）
qq_22317389的博客
07-18 3850
DPR手机端物理像素是设备像素的两倍，在stylus下定义一个mixin.styl； 在styl中定义一个函数，并且可以传入一个color border-1px($color) position : relative &amp;:after display: block position: absolute left: 0 bottom: 0 ...
CSS—通过伪类解决1PX问题
麻球科技
05-24 329
CSS—通过伪类解决1PX问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值