CSS画0.5px的线

今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主。代码如下:

/*0.5px上边框*/
.half_top_border_before:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.05rem;
    background-color: #ececec;
    transform: scaleY(0.5);
    transform-origin: center top;
    z-index: 2;
}

利用after和before的话好像只能画两条线,如果要画整个边框可以先画两倍长宽的边框在缩小到0.5。需要三条边框的话可以考虑在容器内建立三个容器表示边框线再缩小。

时间: 2024-08-10 19:17:24

CSS画0.5px的线的相关文章

css3写出0.5px的边框

一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div sty

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

细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即css中的1个像素对应物理屏幕中1个以上的像素点. 对于普通电脑,屏幕物理像素和css像素一一对应,显示的最小单位就是1px.而现在的手机,屏幕物理宽度一般都大于页面显示宽度.例如苹果6s的屏幕分辨率为1334x750像素,但是以375px的宽度显示页面,设备像素比就是750/375=2:此时在css中

用webgl画个太阳系(线框图)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="three.min.js"></script> <style type="text/css"> body { color: #808080; font-family

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标. 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形. 1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过 border 来实现: 2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上.右.下.左.上左.

html+css画虚线,实线

html+css画虚线,实线 2014-07-18 09:21 4086人阅读 评论(0) 收藏 举报  分类: 其他(11)  html中加入虚线 Posted on 2011-11-23 15:57 Trible.H 阅读(11498) 评论(0) 编辑 收藏 html里添加虚线 <hr style="border:1px dashed #000; height:1px"> <hr style="border:1px dotted #036"

用CSS画英文字母

起因是在网上看到了有人用纯css画出了英文字母,感觉不难,了解过css3的话都会感觉思路比较直观 主要用到的css知识点:绝对定位,圆角属性以及元素的宽高均为零时边框的挤压性质 效果图 源代码 <!DOCTYPE html> <html> <head> <title>CSS-Letter</title> <meta charset="utf-8"/> <style type="text/css&qu

CSS3实现0.5px的边框

前端页面细节处理好了才会显得精致.边框在网页中是常见的一种样式了.虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的. 今天主要说一下如何让边框显示0.5px的方法: 方法一:利用渐变 关于渐变可以看下面两篇文章做深入了解: CSS3 渐变(Gradients) 深入理解CSS3 gradient斜向线性渐变 实现原理: 把元素的伪类高度设为1px,背景渐变,一半有颜色,一半透明. 线上案例:百度糯米(没有改版的话) 代码如下: <!DOCTYPE ht

css画三角

#sanjiao{    width: ;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-top: 10px solid black;} div+css画三角形代码原理采用的是均分原理. border-left设置为透明后 ,如果border-top有颜色,那么就会出来一个45度的锐角.

HTML+CSS画一朵向日葵

前几天看到一张图片,倔强的向日葵.(BGM,<倔强>) 看着挺有感触,就想用CSS做一个向日葵. 最终效果图如下: 演示地址: http://suohb.com/work/sunflower.html 主要的难点就在花瓣的处理上,css暂时没有做到这样的尖角圆弧. 我想到的做法是用两个椭圆的部分弧度截取出来,拼接成一个花瓣样式. 原理如下: CSS部分 1 .petal{ 2 position:absolute; 3 width:50px; 4 height:130px; 5 transfor