CSS 3中细线边框如何实现?
在app应用开发中,我们常常都需要用到css3来设置应用的样式。由于app都是在移动设备上进行展示,所以边框描边的线一般都小于1px,而以往我们使用的都是1px及以上的。那么问题来了,对于小于1px的边框怎么处理呢?为大家介绍几种css3中细线边框的写法,希望对遇到类似问题的童鞋有帮助。
1、做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,bg-size设置宽100%,高1px
.line li{
background: url('line.png') left top no-repeat;
background-size: 100% 1px;
background-position: left bottom;}
<ul class="line">
<li></li>
<li></li>
<li></li>
</ul>
这种方法有一个问题,就是左右边框描边虽然可以做旋转(transform) ,但如果要是边框更换颜色那岂不是还要再做图片了;
2、通过上面的方法,我们也很容易联想到线性渐变(linear-gradient),具体实现如下:
.line li{ border: none;
background-image: -webkit-linear-gradient(#222 50%,transparent 50%);
background-image: -moz-linear-gradient(#222 50%,transparent 50%);
background-image: -o-linear-gradient(#222 50%,transparent 50%);
background-image: linear-gradient(#222 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;}
<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>
这种方法仍然不够完美,改变描边位置(left,top,right,bottom)时需要修改参数,如 left描边需要改变:
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);
background-size: 1px 100%;
background-position: left;
3、那还有什么方法可以解决细线边框问题呢?我们不妨可以试试了CSS3阴影(box-shadow),用阴影做描边然后用伪类把多余的给遮罩着:
.line li{box-shadow: inset 0 -1px 1px #000;background: #fff;margin-left: -1px;margin-bottom: 10px;position: relative;}
.line li::after{content:'';position: absolute;top:0;left: 0px;right: 0px;bottom: 0px;border: 1px solid #fff;}
<ul class="line">
<li>box-shadow</li>
<li>box-shadow</li>
<li>box-shadow</li>
</ul>
虽然,小编分享的几种方法都还存在瑕疵,具体使用哪种方法,你可以根据你的情况而定。如果你有更完美的解决方案的话,也欢迎分享出来,大家一起学习,一起进步。
CSS 3中细线边框如何实现?的更多相关文章
- CSS 0.5px 细线边框的原理和实现方式
细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...
- 各种CSS样式设置细线边框
基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...
- 0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS
typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- 说说CSS学习中的瓶颈
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- 认识和理解css布局中的BFC
认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...
- CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- 纯css竟可以做出边框这样长宽度的过渡效果
边框效果如下:鼠标移到下面方形,就有效果 要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...
- 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
随机推荐
- babel 不能统编译Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise的问题
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...
- iOS 实时监测网络状态(通过Reachability)
在AppDelegate.m中 @property (nonatomic, strong) Reachability *reach; - (BOOL)application:(UIApplicatio ...
- react的 react-router使用
官方API:https://reacttraining.com/react-router/web/api/BrowserRouter; React Router 安装命令如下. 使用时,路由器Rout ...
- gdb几个操作
如果进程转为守护进程,可设置如下跟进子进程 set follow-fork-mode child 输出变量/函数/返回值有print, call, display,自行选择 对于打印value has ...
- 时间复杂度 log n
时间复杂度 O(log n) 意味着什么? 预先知道算法的复杂度是一回事,了解其后的原理是另一件事情. 不管你是计算机科班出身还是想有效解决最优化问题,如果想要用自己的知识解决实际问题,你都必须理解时 ...
- poj_3696_The Luckiest number
Chinese people think of '8' as the lucky digit. Bob also likes digit '8'. Moreover, Bob has his own ...
- HashMap的使用
HashMap的使用 import java.util.HashMap; import java.util.Iterator; //HashMap<key, value>():键值对的形式 ...
- 【Effective C++ 读书笔记】导读 Introduction
学习程序语言根本大法是一回事,学习如何以某种语言设计并实现高效程序则是另一回事. 一组明智选择并精心设计的classes.functions.templates可使程序编写容易.直观.高效.并且远离错 ...
- tcl之其他命令-eval/source
- centos7 php7 安装php扩展
yum install php70w.x86_64 php70w-cli.x86_64 php70w-common.x86_64 php70w-gd.x86_64 php70w-ldap.x86_64 ...