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

最新推荐文章于 2025-07-17 21:49:50 发布
原创 最新推荐文章于 2025-07-17 21:49:50 发布 · 756 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了CSS中伪元素的使用方法，特别是如何利用`:after`伪元素结合`scaleY`变换属性来创建特殊的设计效果。通过设置绝对定位、边框样式及变形比例，可以实现复杂的视觉展示。

: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;

}

css实现伪类三角形气泡框 带边框
u010234868的专栏
01-22 962
【代码】css实现带三角形的边框。
8种方案解决移动端1px边框的问题
林恒的博客
07-05 1212
css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。
伪类实现下边框
caimaomaocai的博客
09-25 4918
.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 910
为什么80%的码农都做不了架构师？>>> ...
关于jQuery用css伪类:after为容器添加边框或去掉边框的问题
weixin_42284117的博客
07-26 1442
今天碰到一个问题是要去掉一个div的border，用border：none;没有用,发现border是用伪类加上去的，如下： .screenBox::after { border-bottom: 1px solid #E1E2E6; } 直接用jquery改变css没有用，还要用伪类方法去掉，如下： $('.screenBox').append("<style>.mCommon_bas...
通过伪类设置单边框
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.
详解移动端Html5页面中1px边框的几种解决方法
09-22
由于不同移动设备的像素密度不同，直接使用1px定义的边框在视觉上可能会显得比设计稿中的边框更粗。这主要是因为移动设备中的物理像素和CSS像素的比值不同，导致边框的视觉效果被放大了。 在设计师指出边框过粗的...
移动端Html5 1px边框精细处理方法解析
在移动端HTML5页面开发中，1px边框的显示问题是一个常见的挑战，尤其是在不同设备和浏览器上。...通过伪类、transform、边框图片和box-shadow等技术，可以在大多数情况下实现设计师期望的1px效果。
不同屏幕分辨率实现 1px 边框
qq_39454432的博客
04-28 705
不同屏幕分辨率实现 1px 边框
移动端1px问题解析：解决方案、对比与总结
最新发布
pzhdv的博客
07-17 1233
移动端1px视觉偏差问题源于CSS像素与物理像素的映射差异（DPR）。本文解析了四种主流解决方案：1）CSS伪类+transform缩放（推荐），通过媒体查询适配不同DPR设备；2）viewport动态缩放，使1CSS像素=1物理像素；3）SVG矢量绘制实现精细边框；4）box-shadow模拟简单边框。各方案各有优劣，其中伪类+transform方案兼容性好、样式灵活，是复杂场景首选；viewport缩放适合整站统一规范的新项目。开发者可根据项目需求选择最适合的方案。
一像素边框实现
二熊不是熊二的博客
03-31 567
下文部分引用于移动端1像素边框问题，这篇文章写得很详细，值得一看。 为什么移动端一像素边框和pc端不一样？ 其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用javascript中的window.devicePixelRatio来获取，也可以用媒体查询的-webkit-min-device-pixel...
一像素边框的实现
景洪的博客
07-30 1236
給这个div添加底部一像素边框，<div class='box border-1px'>//首先添加普通的底部一个像素的边框 .box position: relative &:after content: ' ' display: block position: absolute bottom: 0 left: 0 width: 100%
使用伪类显示右边框
暗透了更能看到星光
10-23 767
此处导航使用for循环 右侧border如果使用border-right 显示的话，需要添加padding 但是添加padding的话底部黄色线条会变长 不符合要求 此时可以使用伪类 .navItem:not(:last-child)::after{ content: ""; position: absolute; display: inline-block; top: 36rpx; right: -20rpx...
css样式
weixin_72718348的博客
07-19 851
css
CSS画特殊边框
weixin_51263829的博客
07-03 497
【代码】CSS画特殊边框。
【CSS】1 像素（0.5 像素）问题
小秀的博客
07-24 672
造成这个问题的原因是由于⾼分辨率屏幕的像素密度⽐传统的屏幕要⾼，所以在屏幕上显示的⼀个 CSS 像素对应的物理像素个数也会相应地增多，当使⽤ CSS 中的 1px 来设置边框或者细线时，实际上渲染出来的线条在屏幕上会被拆分为多个物理像素，从⽽导致看上去更粗。CSS 中的 1 像素问题指的是在⾼分辨率屏幕上显示的 1 像素边框或者细线在实际显示时会⽐ 1 个物理像素更宽或更粗，从⽽导致边框或者细线看上去⽐预期的更粗或者更宽。背景图 background-image。按照比例呈现 1px。
1px的border 1像素边框
hangGe0111的博客
10-18 508
1.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { margin: 0; pa
（三）在不同的设备上实现1像素边框
感恩、奋进、自信
04-30 607
在不同的设备上实现1像素边框，这是因为不同的设备的设备像素比不同，通常有1，1.5，2等，因此利用媒体查询和元素的伪类去实现在不同的设备像素比上实现1px的边框1、首先，在stylus文件夹下新建一个文件mixin.styl，内容如下border-1px($color) position:relative //让伪类相对于他定位，所以设置display:relative &amp;:af...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值