一说到0.5px的边框，我们一般认为是不行的，因为在ps中0.5px的线也是做不出来的，这个计算机的像素有关系。

废话不多说了，0.5px 其实用的是css3新特性，box-shadow：阴影设置

代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

<div style="margin-top: 10px;border:1px solid #f00;width: 100px; height: 20px;">1px 红色的边框</div>

<div style="margin-top: 10px;width: 100px;height: 20px;box-shadow:0.5px 0.5px #f00 ,0.5px 0.5px #f00 inset">

0.5px 红色的边框

</div>

</body>

</html>

css3写出0.5px的边框的更多相关文章

  1. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  2. CSS3实现0.5px的边框

    前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px ...

  3. CSS 0.5px 细线边框的原理和实现方式

    细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...

  4. css3写出飘雪花特效

    大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...

  5. 0.5px的边框

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. css给div添加0.5px的边框

    具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. css3 使用SVG做0.5px 的边框细线

    .HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http: ...

  8. 用css3写出的倒三角形

    <!DOCTYPE html><html><head><meta charset="gb2312" /><title>无 ...

  9. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

随机推荐

  1. [转]SQLite C/C++

    SQLite C/C++ http://blog.csdn.net/diaoser/article/details/6830786   辅助工具工具 Sqlite数据库的管理工具有SQLiteMana ...

  2. I.MX6 KEY_ROW4 can't as GPIO pin

    /********************************************************************** * I.MX6 KEY_ROW4 can't as GP ...

  3. git 恢复工作区删除的所有文件

    /********************************************************************* * git 恢复工作区删除的所有文件 * 说明: * 今天 ...

  4. 【avalon源码】

    1. document.getElementsByTagName('head')[0] document.head 2. 3. var IEVersion = NaN if (window.VBArr ...

  5. PostgresSQL 学习资料记录处

    PostgresSQL 学习资料记录处  博客:http://francs3.blog.163.com PostgreSQL9.4 中文手册:http://www.postgres.cn/docs/9 ...

  6. free命令

    最近服务器总是出问题,研究一下free 以M的形式显示: 参数: Swap 是交换区信息, Swap空间的作用可简单描述为:当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当 ...

  7. iOS中的多线程及GCD

    多线程中的一些概念 //任务:代码段  方法  线程就是执行这些任务 //NSThread类 创建线程 执行线程 [NSThread isMainThread]//判断是否是主线程 #import & ...

  8. Java-->多线程复制（文件指针）

    --> 这里用到两种方法...其实也不算两种,就一点点不一样而已... ---> Test 测试类 package com.dragon.java.multithreadcopy; imp ...

  9. poj 2299 树状数组求逆序对数+离散化

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 54883   Accepted: 20184 ...

  10. C++ Primer : 第二章：变量和基本类型(1)

    变量和基本类型之第一篇:基本内置类型和变量 一. (1) C++定义了一套包括算数类型和空类型,这些类型有:布尔类型bool,字符类型char,宽字符类型wchar_t,Unicode字符char16 ...