博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用css实现自定义虚线边框
阅读量:6247 次
发布时间:2019-06-22

本文共 333 字,大约阅读时间需要 1 分钟。

开发产品功能的时候ui往往会给出虚线边框的效果图,于是乎,我们往往第一时间想到的是用css里的border,可是border里一般就提供两种效果,dashed或者dotted,ui这时就不满意了,说虚线太密了。废话不多说,下面直接给解决方案(参考css揭秘):

div {    padding: 1em;    border: 1px dashed transparent;    background: linear-gradient(white,white) padding-box,    repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em,white 0,white 0.75em);}

基本效果如下:

转载地址:http://tiria.baihongyu.com/

你可能感兴趣的文章
史上最全面的React-react基础
查看>>
聊聊Git原理
查看>>
如何评价Normalize.css
查看>>
CSS实现元素居中原理解析
查看>>
React 快速上手 - 08 redux 状态管理 react-redux
查看>>
当程序员有了中年危机 你会发现你就是个屁
查看>>
关于同步的一点思考-上
查看>>
阿里云函数计算
查看>>
Java 10 新特性全览
查看>>
你真的会正确使用断言吗?
查看>>
Android点将台:济世儒侠[-ContentProvider-]
查看>>
java基础学习:JavaWeb之Cookie和Session
查看>>
骨架屏(Skeleton Screen)在Android中的应用
查看>>
Spring源码分析(三)手写简单的IOC容器和解决循环依赖问题
查看>>
MySQL索引笔记
查看>>
vue-router 嵌套路由
查看>>
java注解基础与使用
查看>>
Java 8中的Optional: 如何正确使用?
查看>>
处理请求(AFURLRequestSerialization)和响应(AFURLResponseSerialization)
查看>>
仿抖音 火山视频滑动播放
查看>>