前端必会的html+css常用技巧之虚线的特殊实现方式(代码片段)

关键词：

前端必会的 HTML+CSS 常用技巧 之 虚线的特殊实现方式

• • 利用边框 border 属性
  • 利用background 的 linear-gradient 属性
  • • 上
    • 下
    • 左
    • 右
    • 矩形

利用边框 border 属性

• 这个属性比较简单

<div class="dashed">利用边框 border dashed 属性实现虚线</div>
<div class="dotted">利用边框 border dotted 属性实现虚线</div>

div 
    width: 500px;
    padding: 10px;

.dashed 
    border-bottom: 1px dashed #000;

.dotted 
    border-bottom: 1px dotted #000;

• 看下这两种虚线的效果：
  

但是有时候，我们想要的效果并不是这样的，这虚线 “虚”的也太不明显了。

 
 

利用background 的 linear-gradient 属性

 

上

• 效果：
  

• 实现代码：

<div class="top">利用background 的 linear-gradient 属性实现 上 虚线</div>

div 
    width: 500px;
    padding: 10px;

.top 
    background: linear-gradient(
        to left,
        transparent 0%,
        transparent 50%,
        red 50%,
        red 100%
    );
    background-size: 10px 1px; /* 第一个参数控制虚线的间隙（利用的是图片的放大效果一样），第二个参数控制虚线的粗细 */
    background-repeat: repeat-x;
    background-position: top; /* 控制方向：top、bottom */

 

下

• 效果：
  

• 实现代码：

<div class="bottom">利用background 的 linear-gradient 属性实现 下 虚线</div>

div 
    width: 500px;
    padding: 10px;

.bottom 
   background: linear-gradient(
        to left,
        transparent 0%,
        transparent 50%,
        blue 50%,
        blue 100%
    );
    background-size: 10px 1px; /* 第一个参数控制虚线的间隙（利用的是图片的放大效果一样），第二个参数控制虚线的粗细 */
    background-repeat: repeat-x;
    background-position: bottom; /* 控制方向：top、bottom */

 

左

• 效果：
  

• 实现代码：

<div class="left">利用background 的 linear-gradient 属性实现 左 虚线</div>

div 
    width: 500px;
    padding: 10px;

.left 
    background: linear-gradient(
        transparent 0%,
        transparent 50%,
        #000 50%,
        #000 100%
    );
    background-size: 1px 10px; /* 竖的虚线与横虚线刚好相反，第一个参数控制虚线的粗细，第二个参数控制虚线的间隙 */
    background-repeat: repeat-y;
    background-position: left; /* 控制方向：right、left */

 

右

• 效果：
  

• 实现代码：

<div class="right">利用background 的 linear-gradient 属性实现 右 虚线</div>

div 
    width: 500px;
    padding: 10px;

.right 
    background: linear-gradient(
        transparent 0%,
        transparent 50%,
        orange 50%,
        orange 100%
    );
    background-size: 1px 10px; /* 竖的虚线与横虚线刚好相反，第一个参数控制虚线的粗细，第二个参数控制虚线的间隙 */
    background-repeat: repeat-y;
    background-position: right; /* 控制方向：left、right */

 

矩形

• 效果：
  

• 实现代码：

<div class="rectangle">利用background 的 linear-gradient 属性实现 矩形 虚线</div>

div 
    width: 500px;
    padding: 10px;

.rectangle 
   border: 1px dashed transparent;
    background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #000 0, #000 .3em, #fff 0, #fff .6em);
    /* .3em 控制虚线的宽度或者长度，.6em 控制虚线的间隙 */

 
 

如有不足，望大家多多指点！ 谢谢！

前端必会的html+css常用技巧之移动端1px边框(代码片段)

目录写在开头物理像素(physicalpixel)设备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前，我们需得了解几个重要的名词：物理像素、设备独立... 查看详情

前端必会的html+css常用技巧之移动端1px边框(代码片段)

目录写在开头物理像素(physicalpixel)设备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前，我们需得了解几个重要的名词：物理像素、设备独立... 查看详情

前端必会的html+css常用技巧之移动端1px边框(代码片段)

目录写在开头物理像素(physicalpixel)设备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前，我们需得了解几个重要的名词：物理像素、设备独立... 查看详情

常用前端布局，css技巧介绍(代码片段)

常用前端布局，CSS技巧介绍对前端常用布局的整理总结，并对其性能优劣，兼容等情况进行介绍css常用技巧之可变大小正方形的绘制1：若通过设置width为百分比的方式，则高度不能通过百分比来控制.在这个地方可以使用padding来... 查看详情

大前端公开课——必玩必会的cli脚手架（vue面试问答技巧）(代码片段)

昨晚听了大前端的一节公开课——必玩必会的CLI脚手架，老师讲的很好，思路、逻辑都很清晰，课程中讲到了几个Vue的面试题的解答思路，我截屏做了一下整理，以便以后反复理解。[目录]目录[目录]1、v-if和v-for哪个优先级更高... 查看详情

前端必会的html知识总结整理(代码片段)

1.浏览器内核ie：trident（三叉戟）内核firefox：gecko（壁虎）内核safari：webkit（浏览器核心）内核opera：以前是presto（急速）内核，现在是和谷歌共同开发的blink࿰ 查看详情

16个必会的pycharm小技巧整理，学会效率快一倍！(代码片段)

Pycharm作为python常用IDE之一，功能丰富且非常智能，深受大家喜欢，当你掌握之后效率开发效率也相当高。下面就给大家整理了一些Pycharm的快捷键，欢迎点赞、收藏！1快速开启新的一行当你的光标不是处在一... 查看详情

elasticsearch必知必会的干货知识二：es索引操作技巧(代码片段)

该系列上一篇文章《Elasticsearch必知必会的干货知识一：ES索引文档的CRUD》讲了如何进行index的增删改查，本篇则侧重讲解说明如何对index进行创建、更改、迁移、查询配置信息等。仅创建索引：PUTindexPUT/index添加字段设置（mappings... 查看详情

pandas必知必会的18个实用技巧，值得收藏！

参考技术A干净整洁的数据是后续进行研究和分析的基础。数据科学家们会花费大量的时间来清理数据集，毫不夸张地说，数据清洗会占据他们80%的工作时间，而真正用来分析数据的时间只占到20%左右。所以，数据清洗到底是在... 查看详情

十几个css高级常见技巧汇总（虚线框三角形优惠券卡券滚动条多行溢出...）...

...天来分享一些比较高级复杂的CSS技巧，都是我们平常常用的，或许对你有所帮助。设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景outline属性的妙... 查看详情

前端基础知识之html和css全解

前端回顾目录前端回顾基础知识HTTP协议认识HTMLHTML组成HTML标签div和span标签特殊的属性常用标签认识css选择器属性前端就是展示给用户并且与用户进行交互的操作界面。前端包括包括三部分：html:网页的骨架，没有任何样式，比... 查看详情

前端基础知识之html和css全解

前端回顾目录前端回顾基础知识HTTP协议认识HTMLHTML组成HTML标签div和span标签特殊的属性常用标签认识css选择器属性前端就是展示给用户并且与用户进行交互的操作界面。前端包括包括三部分：html:网页的骨架，没有任何样式，比... 查看详情

5个必知必会的python数据合并技巧(代码片段)

大家好，前不久在我们技术交流群有群友提到最近他面试阿里70万总包的数据岗位，对方问Pandas的5种数据合并的函数，结果他只答出了2个。那么，究竟是哪五个呢？今天，我们就来带大家了解一下！想... 查看详情

前端之html

目录什么是前端前端基础前端必备知识点软件开发架构web服务的本质请求方式HTTP协议是什么四大特性数据格式响应状态码HTML是什么HTML文档结构HTML的注释标签的分类双标签和自闭合标签块级标签和行级标签标签属性HTML常用标签h... 查看详情

java开发必会的linux命令

原文链接：https://www.cnblogs.com/zhuawang/p/5212809.html作为一个Java开发人员，有些常用的Linux命令必须掌握。即时平时开发过程中不使用Linux（Unix）或者mac系统，也需要熟练掌握Linux命令。因为很多服务器上都是Linux系统。所以，要和服... 查看详情

前端必会的图片懒加载，你造吗？(代码片段)

一.何为懒加载🌃：  在我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。... 查看详情

c/c++中常用必会的专业单词(持续更新目前50个)

在阅读C/C++很多经典书籍时，为了不改变原意有些单词就会保留不会被翻译。这时就需要我们会一些常见的单词术语，减少阅读障碍。C/C++专业词汇Pointertomember：指针成员destructor：析构函数constructorÿ... 查看详情

日常工作必会的git命令

目录一、常用git命令二、在命令行里使用git时常用的Linux命令三、强烈推荐一个git学习网站            一、常用git命令1、gitstatus，简写gitst，查看本地修改状态2、gitaddgitadd文件名，暂存名为【文件名】的文件的... 查看详情