0.5px边框的实现

最新推荐文章于 2024-01-04 09:27:05 发布

原创最新推荐文章于 2024-01-04 09:27:05 发布 · 449 阅读

1 ·

CC 4.0 BY-SA版权

1px的边框，经理嫌太粗了，0.5px的又识别不了。所以：

.list div:after{
content: "";
display: block;
position: absolute;
left: -42%;
margin-top: 4%;
width: 184%;
height: 1px;
background: #ccc;
-webkit-transform:scale(0.5);
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

my小新

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

css中引入svg来兼容部分安卓机显示0.5px边框的示例

09-24

在CSS中，可以通过设置元素的background-image属性为SVG代码，然后将SVG作为图片类型来使用，以此来实现0.5px边框的效果。这样不仅可以解决安卓设备不兼容0.5px边框的问题，还保持了设计上的精细度。文章中还提到...

css实现0.5px线条解决移动端兼容问题(推荐)

01-18

0.5px线实现方法</title> <style type=text/css> /*标准1px边框*/ .b1{ height: 40px; border: 1px solid #ff0000; } /*1.可以利用利用渐变样式=>实现.5px*/ .a1{ height: 1px; margin-top: ...

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

CSS 实现 0.5px 边框线

weixin_34249367的博客

02-11

581

原有元素要添加 position: relative; ::before伪元素一点要加z-index属性保证原有元素处于后加元素上层，否则会导致原有元素上点击等事件触发不了 <div class="top border-line"></div> .top { position: relative; } .borde...

边框0.5px实现方法

Joe_yuqiao的博客

09-27

2430

方案1：伪元素+scale (兼容性好，推荐) 实现方式：给容器设置伪元素，设置绝对定位，宽高都是200%，边框是1px，然后使用transform:scale(0.5) 让伪元素缩小原来的一半，此时伪元素的边框和容器的边缘重合。 <div class="box box1"></div> .box { width: 360px; height: 50px; border-radius: 5px; mar

移动端0.5px边框实现

奔跑吧代码

06-25

943

移动端0,5px边框实现

0.5px边框学习

ISaiSai的专栏

08-10

1403

0.5px 在iphone 下支持在android 下不支持（不会显示边框）简单解决办法.border { position: relative; }.border:after { content: " "; display: block; position: absolute; box-sizing: border-box; left: 0px;

【CSS】设置0.5px的边框宽度

最新发布

qing_小诺的博客

01-04

2076

直接写border:0.5px solid #ccc;总结：目前推荐的是伪元素+tranform缩放的方法，相对灵活一点，可以针对不同元素进行设置。

css实现各种0.5px的线(小结)

09-27

以下将详细讨论如何通过不同的方法实现0.5px边框、圆角边框以及左右底部线条。 1. **0.5px边框** 一种常见方法是利用伪元素(`::before`或`::after`)和`transform: scale(0.5)`。首先，创建一个相对定位的父元素，...

css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景

qq_32886245的博客

04-16

2041

效果图 0.5px边框 0.5px边框，可以用伪元素实现，before、after都可以。移动端H5页面用的比较多。圆角渐变色边框+圆角渐变色背景实现外部圆角边框，内部圆角渐变色背景，是用父div + 子div实现的，其中父div和子div用不同的背景颜色，父div的padding大小，就是整体的边框高度。如果内部div不需要圆角，可以参考这篇文章：CSS 巧妙实现带圆角的渐变边框代码 <!DOCTYPE html> <head> <meta charset=

边框 0.5px

ltc_Yan的博客

10-11

215

关于设置边框0.5px方案

0.5px边框，css及sass

月迷津渡丶的专栏

05-28

1771

手机上的边框，1px的宽度已经无法满足需求了，0.5px的需求应用而生。做法：利用伪类，做一个长宽200%，1px宽度的边框，再缩小至0.5倍。

css 边框设置0.5px

weixin_30955341的博客

10-16

641

代码如下：利用transform:scale(0.5) 效果图：转载于:https://www.cnblogs.com/yuesu/p/9797721.html

CSS3实现0.5px的边框

易之晓的博客

10-21

5154

单边框0.5px，可以用以下方式：方式一：border + border-image + 线性渐变linear-gradient <div class="border">0.5像素边框</div> <style> .border { width: 200px; height: 200px; m...

关于像素边框0.5px

cmy_1994的博客

03-17

686

像素边框同样是retaina屏幕下的问题，根本原因是：1px使用2dp渲染 border：0.5Px（仅iOS8可以识别）因此让边框缩放一倍scaleY(.5);

css3写出0.5px的边框

xiaozhen0610的博客

06-13

400

一说到0.5px的边框，我们一般认为是不行的，因为在ps中0.5px的线也是做不出来的，这个计算机的像素有关系。废话不多说了，0.5px 其实用的是css3新特性，box-shadow：阴影设置代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style

css 边框0,CSS3实现0.5px的边框

weixin_29485605的博客

08-03

937

单边框0.5px，可以用以下方式：方式一：border + border-image + 线性渐变linear-gradient0.5像素边框.border {width: 200px;height: 200px;margin: 0 auto;border-bottom: 1px solid transparent;border-image: linear-gradient(to bottom,t...

移动端写0.5px边框

Love_your_life的博客

05-29

1486

项目中应设计师要求，1px的边框觉得不精致。。遂要实现0.5px边框实现方式如下：伪类 + transform 实现单条border样式设置： .scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ''; ...

0.5px的边框线css实现的方法

weixin_43824675的博客

08-19

669

.grid-text :after{ content: ' '; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #979797; /* 如果不用 background-color, 使用 border-top:1px solid #979797; 效果是一样的*/ -webkit-transform: scaleY(0.5); ..

CSS---手机端如何实现细、1px、0.5px边框

COCOLI_BK的博客

01-05

2100

直接采用0.5px，使用方便，兼容性差。不推荐使用用阴影代替边框，设置阴影box-shadow,基本上可以实现，也可展示圆角。兼容性一般给元素设置伪元素，设置绝对定位，高度为1px,背景图为线性渐变，一般有颜色，一般透明。视觉上宽度只有0.5px。只适合设置一条边框，不能展示圆角给容器内设置伪元素，设置绝对定位，宽、高是200%，边框是1px，然后使用transformscale(0.5);让元素缩小一半，这时候伪元素的边框和容器的边缘重合，视觉上宽度只有0.5px。源地址网址。...

CSS细线技巧：0.5px边框与圆角实现教程

1. 0.5px边框：通过使用伪元素（`:before`或`:after`）并设置为绝对定位，为需要边框的元素创建一个1px的边框，然后应用`transform: scale(0.5)`使其缩小一半，达到0.5px的效果。这种方法需要注意的是，不同浏览器...