一说到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. Entityframework更新数据和插入数据

    public bool UpdateEmloyeeInfo(EmployeInfo employeInfo) { bool flg = false; try { using (UserManageDB ...

  2. magento -- 给后台分类管理页的分类商品加一栏商品类型

    当使用特定分类来控制前台的商品显示时,后台分类管理页的分类商品只有编号.名称.SKU和价格这几栏,选择特定商品相当不便. 可以在这里多加一栏商品类型用来筛选商品,添加的方式很简单. 打开文件/app/ ...

  3. latex 小结

    1 no file .bbl http://blog.csdn.net/zhedasuiyuan/article/details/9223637 另外,你可能有多个 .bbl.目前的做法是,在控制台上 ...

  4. Qt之JSON生成与解析

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - December ...

  5. yii 创建步骤

    1.首先,下载yii框架,解压到www目录下 2.配置php的环境,在控制台输入php,显示下划线表示,路径配置成功 3.在控制台,切换到yii/framework下,运行yiic webapp .. ...

  6. 【题解】【BST】【Leetcode】Convert Sorted Array to Binary Search Tree

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST.思路: ...

  7. 图像金字塔及其在 OpenCV 中的应用范例(下)

    前言 本文将主要讲解如何使用 OpenCV 实现图像分割,这也是图像金字塔在 OpenCV 中的一个重要应用. 关于图像分割 在计算机视觉领域,图像分割(Segmentation)指的是将数字图像细分 ...

  8. CSS2伪类选择器要点

    有四个选择器,分别是 hover:鼠标悬停 link:链接不能使用时 visited:链接被点击后 active:链接被点击时,如果鼠标不放,就会一直触发active属性 link在w3c中记录为链接 ...

  9. 感知机学习算法 python实现

    参考李航<统计学习方法> 一开始的感知机章节,看着不太复杂就实现一下... """ 感知机学习算法的原始形式 例2.1 """ ...

  10. linux死锁检测的一种思路

    前言: 上一篇博文讲述了pstack的使用和原理. 和jstack一样, pstack能获取进程的线程堆栈快照, 方便检验和性能评估. 但jstack功能更加的强大, 它能对潜在的死锁予以提示, 而p ...