位置: IT常识 - 正文

css 实现虚线效果的3种方式详解(cssborder虚线边框)

编辑:rootadmin
css 实现虚线效果的3种方式详解 一、效果

推荐整理分享css 实现虚线效果的3种方式详解(cssborder虚线边框),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css里虚线,css样式虚线怎么实现,cssborder虚线边框,css中虚线怎么设置,cssborder虚线边框,cssborder虚线边框,css中虚线怎么设置,css中实线虚线,内容如对您有帮助,希望把文章链接给更多的朋友!

首先可以看一下下图显示的实现效果:

用三种方式实现了虚线效果: 点击查看demo代码

二、实现1、border 属性

查看 mdn 的 border,我们知道 border 可以用于设置一个或多个以下属性的值:border-width、border-style、border-color。

border-style 可以设置边框的样式,其中 使用 dashed 设置虚线效果。

css 实现虚线效果的3种方式详解(cssborder虚线边框)

实现代码:

设置div的样式

.box {height: 100px;line-height: 100px;margin-bottom: 20px;} <div className="box line1">虚线1</div>

用 border 实现:

/*虚线1 css*/.line1 {border: 1px dashed red;} 2、巧用 background 和 linear-gradient

我上篇文章《css 设置border边框颜色渐变效果》 里有详细的介绍过 linear-gradient 的使用,不清楚的同学可以先学习下

先看实现代码:

<div className="box line2">虚线2</div>/*虚线2 css*/.line2 {background: linear-gradient(to left,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);background-size: 10px 1px;background-repeat: repeat-x;}

我们把css拆解开慢慢看:

1)先设置了background

background 属性是一个 简写属性,可以在一次

本文链接地址:https://www.jiuchutong.com/zhishi/297883.html 转载请保留说明!

上一篇:基于Perclos&改进YOLOv7的疲劳驾驶DMS检测系统(源码&教程)

下一篇:关于将tomcat卸载干净(如何将tomcat卸载干净)

  • 公司购入的财务怎么做账
  • 汇兑损益一般是多少
  • 增值税附加计入什么科目
  • 什么经营范围可以开电费发票
  • 滴滴打车电子票怎么取票
  • 贷款未收属于什么科目
  • 进项税额抵扣一般多少
  • 投资公司的投资人叫什么
  • 所得税退税会计账务怎么处理
  • 顺流交易为什么不管是否出售
  • 公司注销固定资产交什么税
  • 基金公司管理费收入怎么入账
  • 广告业增值税税率6%是多少
  • 增值税专用发票验票
  • 增值税小规模纳税人申报表填表说明
  • 财务费用中的利息收入指什么
  • 员工的水电费计入什么科目
  • 汇总会计报表和合并会计报表均是
  • 金蝶资产减值损失取数计算公式
  • 利润弥补亏损如何处理
  • 应交税费贷方余额负数表示什么
  • 不能抵扣的费用
  • 销售商品包装材料怎么做
  • win10蓝屏错误怎么办
  • php存储过程是什么
  • Win10电脑重装系统要多少钱
  • 不能加载axf文件
  • 梅德威海滩棕榈树间散步的冲浪者,印尼巴厘岛 (© helivideo/GettyImages)
  • 期间费用为何要摊销
  • 工程复工程序是什么
  • 融资性售后回租承租方为什么不交税
  • 蕾德纳斯
  • Asian elephants in West Bengal, India (© Avijan Saha/Minden Pictures)
  • php遍历文件夹
  • 门店装修费怎么记会计凭证
  • 结转完工产品成本的会计分录
  • 商品发生销售退回
  • python中如何创建字典
  • 支付宝支付高速公路发票怎么打印
  • mysql skip ssl
  • 企业工会经费的会计分录
  • 利润分配未分配利润期末有余额吗
  • 无形资产如何摊销 当月还是下月
  • 税控设备抵减税款分录
  • 企业有进项税额,无销项税额
  • 全面推开营改增政策指引
  • 以前年度财务费用漏记
  • 当月已付款, 没收到发票怎么做账
  • 一次性工伤医疗补助金怎么领取
  • 预付账款的账务处理视频教程
  • 以前年度不合规发票如何调年报
  • 开票方与付款方不一致问题
  • 劳务派遣差额征税如何开票
  • 小规模公司怎么做账
  • ubuntu启动菜单 哪个键
  • 电脑xp系统改装win7系统可以吗
  • win7如何彻底删除软件
  • linux,Centos5,Ubuntu关掉ipv6的方法
  • macza
  • win7注册表详解
  • win8账户锁定无法登录
  • 你需要windows7sp1才能安装ie11
  • linux目录结构创建
  • Win10预览版拆弹
  • linux小技巧
  • 如何解决老电脑卡顿问题
  • 用什么命令最简单
  • opengl绘制点线面
  • nodejs基本原理
  • img可以设置的属性
  • jquery悬浮窗
  • document.getElementById().src
  • ajax 分页
  • python字典键值对个数
  • 国企9000扣完五险一金
  • 国家税务局扬州 袁霞
  • 慧算账财务公司简介
  • 广东电子税务局官网登录入口手机版
  • 重点税源企业税收分析报告
  • 小规模纳税人土地使用税减免政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设