css划一条1px直线

最新推荐文章于 2023-09-28 11:01:26 发布
最新推荐文章于 2023-09-28 11:01:26 发布
阅读量3.1k 收藏 2
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/poplau/article/details/2317683
版权
#cqcbxinwen-left .line{
width:230px;
height:1px;
line-height:1px;
overflow:hidden;
font-size:0px;//这个是关键
margin-left:10px;
border-bottom:dashed 1px #ccc;
}
poplau
关注
如何用CSS3画一条0.5px的直线？
唐家小妹的博客
07-05 514
来将元素在垂直方向上缩放为原来的一半高度，从而实现看起来像是0.5像素宽的线条。在 CSS 中，实际上无法直接指定 0.5px 的线条粗细，因为 CSS 中的像素单位是最小单位，通常无法表示小数像素。但是，可以通过一些技巧来模拟出看起来像是 0.5px 粗细的线条，例如使用伪元素和缩放等技巧。除了使用伪元素来模拟0.5像素线条之外，还有一种常见的方法是使用 CSS 的 transform 属性来实现。需要注意的是，这种方法是一种近似实现，实际上并没有真正的 0.5px 粗细，而是通过视觉上的伪装来实现。
css3直线运动_CSS3实现动画线条运动效果实例集合（一）
weixin_39648492的博客
12-20 1629
在我们日常的开发中，有时候有的图片，布局块需要加一下边框运动效果，对于这些效果，我们可以使用CSS3动画属性animation，再配合css的一些技巧制作出来。下面是收藏的一些效果实例。1、边框流动效果html：css3效果的内容部分css:.css3-1{width: 200px;height: 200px;position: relative;}.css3-1::after,.css3-1::...
画出1px 的线
weixin_43221240的博客
12-24 852
看到以前的代码复习一下。 点：1.画出1px的线,利用伪元素 2.利用animate第三方来做炫酷的特效 html: <div class="bottom"> <div class="bottom_center"> <img class="one" src="./images/logo.png" alt=""&...
[css] 画直线
qq_14993591的博客
08-11 1249
width: 42px; height: 0; border-bottom: 3px solid #006da9;
如何画 1PX 的线
包磊磊的博客
04-29 1198
因为屏幕的分辨率和浏览器的的分辨率存在换算关系，所以1像素的线在屏幕上会占用2个或者2个以上视觉像素，这点在移动端尤其明显。 解决方案： // 解决方案有很多种，这里仅给出我经常使用的使用伪类解决 .outer { position: relative; } .outer:before { display: block; content: ''; position: absolute;...
CSS画一条0.5px的直线
qq_56392992的博客
09-05 2351
CSS画一条0.5px的直线 .outer { height: 1px; width: 200px; background-color: red; transform: scaleY(0.5); transform-origin: 50% 100%; } 注意：一定要加transform-origin属性 不然直线会不清晰。 ...
css画一条0.5px的直线
最新发布
Frank_colo的博客
09-28 682
用到css3的transform的scaleY(0.5)函数，对象图形进行变形缩放，0.5表示缩放成原来的一半。一些用来装饰的图形，比如字体的前面或者后面设置图标，画一条线。如果要画很细很细的线，0.5px ,怎么画。
画一条0.5px的直线
qq_39390711的博客
10-12 2375
画一条0.5px的直线 transform：scale（0.5） <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .half
css3直线运动_纯css3动画--边框线条动画
weixin_39970668的博客
12-20 1493
这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果。制作方法:1、HTML结构该边框线条动画特效的HTML结构使用的是一个空的来作为容器。2、CSS样式该边框线条动画特效的两条动画的线条分别使用.bb::before和.bb::after来制作，并使用animation调用clipMe帧动画来完成线条的运动效果。.b...
css3实现画半圆弧线的示例代码
09-24
在现代网页设计中，CSS3的应用越来越广泛，其中CSS3的border-radius属性是一个强大的工具，它不仅可以用来创建圆角，还可以用来生成各种形状的图形，包括半圆弧线。这篇文章的核心知识点就是如何利用CSS3的border-...
CSS系列005——画直线
hanbing1307的博客
03-10 1432
【代码】CSS系列005——画直线。
canvas 画点_css+canvas 随便画一个星空
weixin_39943586的博客
11-28 216
今天躺在床上刷抖音的时候，看见了一个马克笔随便画星空的视频，很有意思。先看效果：开始需求分析：1、渐变色的背景2、画一颗树和一些草3、水面的倒影4、随便画点星星5、画一颗流星1、渐变色的背景先确定200*500的区域，使用css3的线性渐变属性，依次深蓝、浅蓝、紫色、粉色、黄色画出一个渐变色的背景。为了使背景更真实，使用同样的颜色顺序，在不同的角度，加上一些模糊和透明。再画一遍重叠起来。再重叠一层...
移动端画1px线
dtbk123的博客
04-12 510
移动端的像素比（devicePixelRatio）是指手机的物理像素和逻辑像素的比值，物理像素又称设备像素，一个物理像素是显示器（手机屏幕）上最小的物理显示单元。逻辑像素，也可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素。如果我们设置了边框为1px，那么在像素比为2的手机上边框就会显示为2px。下面来说一下如何处理 首先可以使用...
css实现1px的几种办法
博哥的二进制世界
06-29 4105
css实现1px的几种办法背景物理像素和逻辑像素为什么css设置1px，但是在移动端上显示却感觉有些粗呢？css如何实现1px的物理像素法一：利用box-shadow法二：设置 border-image 方案法三：使用background-image实现法四：多背景渐变实现法五：用小数来写px值法六：viewport + rem 实现法七：伪类 + transform 实现 背景 物理像素和逻辑像素 物理像素(physical pixel) 物理像素也叫硬件像素或者设备像素，一个物理像素是显示器（手机屏
drawLine
yz1234的专栏
03-31 490
jfreechart 折线图
【CSS】画出宽度为1像素的线或边框
Primice个人空间
11-10 1653
由于多倍的设计图在移动设备上显示时会将设计图进行缩小到视口宽度，而1px的边框没有随着页面进行缩小而导致效果太粗，想要还原设计图1px的显示效果，因此需要一些方法来实现边框宽度小于1px。实现方法很多，下面是个人认为比较好的几种。
CSS实现1px像素，解决移动端1px线条的显示方式
前端小白
01-04 977
CSS实现1px像素，解决移动端1px线条的显示方式
用css画一条流动效果的直线
05-31
在上面的代码中，通过伪元素 `::after` 创建一条宽度为100%、高度为2px的线条，并用 `linear-gradient` 实现了渐变效果。然后通过 `animation` 属性来实现流动效果，关键帧中的 `transform` 属性使得线条在水平方向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值