做前端的程序猿特别是移动端的,都很头疼遇到一种情况就是需要div底部加一个线条但是 1px的效果很粗,跟设计案上的不符合。

我的一个伙伴查找出来的一个解决方法:

在需要加上的线条的地方加上一个div class是一下对应的类,(使用的时候自己试试就知道了)

css代码:

.list-up-down-line:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}

.list-up-down-line:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}

注意:在pc端是没有效果的,移动端才有效果。

css如何画出类似原生的线条?的更多相关文章

  1. 用css属性画出一棵圣诞树

    对于学习前端的童鞋,css的掌握是必须的.今天就来实现用css画出一棵圣诞树. 主要练习的是css里面border的练习与掌握程度. 在body创建一个主区域<div></div&g ...

  2. CSS画出的各种形状图

    利用CSS可以画出各种需要的图形目录[1]矩形[2]圆形[3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星简单图形 矩形div{ width: 1 ...

  3. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  6. 情人节,教大家使用css画出一朵玫瑰花。

    情人节到了,给大家来一朵高端的玫瑰花. 在网上看到的一个canvas实现的玫瑰花,效果很好,但是代码被压缩过,也没有注释,看的云里雾里的. 今天我教大脚用CSS来实现一朵玫瑰花. 先看效果 首先我们画 ...

  7. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  8. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  9. 35.在CSS中 只用一个 DOM 元素就能画出国宝熊猫

    原文地址:https://segmentfault.com/a/1190000015052653 感想: 真神奇! HTML code: <div class="panda" ...

随机推荐

  1. 终于把5GB的Cygwin安装完成了

    From:http://www.cnblogs.com/killerlegend/p/3904478.html Author:KillerLegend Date:2014.8.11 首先,只想说一句, ...

  2. 四、Kafka 核心源码剖析

    一.Kafka消费者源码介绍 1.分区消费模式源码介绍 分区消费模式直接由客户端(任何高级语言编写)使用Kafka提供的协议向服务器发送RPC请求获取数据,服务器接受到客户端的RPC请求后,将数据构造 ...

  3. Personal idea

    我的设想是在android上开发一款应用程序,整体上是一个指南针的样式,或许你可以称之为一个圆盘,在不同的场景下可以作为不同的功能,指南针,游戏转盘,数字转盘等等.界面可以在不同的情境下更换样式.

  4. 20145234黄斐《Java程序设计》第七周

    教材学习内容总结 第十二章部分 - Lambda 认识Lambda语法 Lambda去可以重复,符合DRY原则,而且Lambda表达式可读性更好,操作更简单 匿名类型最大的问题就在于其冗余的语法,la ...

  5. input必填

    <li> <span>出生日期</span> <div style="margin-left: 1.5rem;"> <inpu ...

  6. 谈谈VMware虚拟机中的网络问题

    前言:用了好几年的虚拟机,多多少少都会遇到那么一些网络问题,在这里总结一下这么几年在虚拟机中遇到的一些网络问题(主要针对linux)...... 一.VMware相关基础知识 1.bridged(桥接 ...

  7. 天梯赛 L2-002. (模拟) 链表去重

    题目链接 题目描述 给定一个带整数键值的单链表L,本题要求你编写程序,删除那些键值的绝对值有重复的结点.即对任意键值K,只有键值或其绝对值等于K的第一个结点可以被保留.同时,所有被删除的结点必须被保存 ...

  8. 图片压缩-KMeans

    下面给大家一起分享使用KMeans自动聚类,压缩图片像素点.每种图片可能他们的维度都不同,比如jpg一共有(w,h,3)三维,但是灰度图只有一维(w,h,1),也有四维的图片(w,h,4)等等.我们可 ...

  9. Django rest framwork

    Restful API REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类 ...

  10. 《区块链100问》第85集:资产代币化之对标美元USDT

    USDT是Tether公司推出的对标美元(USD)的代币Tether USD.1USDT=1美元,用户可以随时使用USDT与USD进行1:1兑换.Tether公司执行1:1准备金保证制度,即每个USD ...