一说到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. Evaluate Reverse Polish Notation

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  2. 右键菜单添加程序，指定图标， Notepad2、Sublime Text 2

    右键添加Sublime Text 打开方式 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Sublime Text] ...

  3. CPU的频率、外频、倍频与超频

    如,现有一CPU:Intel Core 2 Duo E8400,其频率是3.0GHz: CPU的外频指的是CPU与外部组件进行数据传输/运算时的速度,倍频则是CPU内部用来加速工作性能的一个倍数,两者 ...

  4. springmvc学习笔记---面向移动端支持REST API

    前言: springmvc对注解的支持非常灵活和飘逸, 也得web编程少了以往很大一坨配置项. 另一方面移动互联网的到来, 使得REST API变得流行, 甚至成为主流. 因此我们来关注下spring ...

  5. hive-jdbc/odbc的解读和看法

    当前的项目中, 涉及到了hive-jdbc/odbc这块, 因此把这几天所调研的资料作一份总结.本文讲解hive-jdbc/hive-odbc的实现, 以期对jdbc/odbc规范和实现有个较深入的理 ...

  6. jq中 offset()方法， scrollTop()方法以及scrollLeft()方法

    offset()方法是用来获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效. scrollTop()方法是用来获取元素的滚动条距离顶端的距离. scro ...

  7. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  8. tyvj1013 - 找啊找啊找GF ——二维背包变种

    题目链接:https://www.tyvj.cn/Problem_Show.aspx?id=1013 好吧,这题没节操=_= 状态f[u,v,i]表示:消费u的人民币和v的人品同时泡到i个mm所需要的 ...

  9. SQLServer如何用T—SQL命令查询一个数据库中有哪些表

    1.查询SQL中的所有表: Select TABLE_NAME FROM 数据库名称.INFORMATION_SCHEMA.TABLES Where TABLE_TYPE='BASE TABLE' 执 ...

  10. 《Java程序设计》第4周学习总结

    学号20145220 <Java程序设计>第4周学习总结 6.1.1 继承共同行为 •定义:继承基本上就是避免多个类间重复定义共同行为. •优点:1.提高了代码的复用性.2.让类与类之间产 ...