位置: 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卸载干净)

  • 施工单位缴税实例
  • 小规模纳税人申请一般纳税人条件
  • 代扣代缴个人所得税手续费返还 增值税
  • 质量赔偿款计入什么会计科目
  • 办公室的饮用水应该放在哪个科目下?
  • 无票收入也需要开票吗
  • 个人所得税红利20%
  • 企业所得税汇算清缴退税分录
  • 非居民企业直接投资居民企业取得股息
  • 个人社保由单位承担的可以进福利费吗
  • 投资理财产品的优势和劣势
  • 2021年路桥费抵扣最新政策
  • 所得税会计核算要点及程序
  • 贷款能不能开发票
  • 公司缴纳的社保离职后自己可以缴纳社保
  • 公司基本户没开影响报税吗
  • 受赠房屋涉及哪些税?
  • 商贸公司进项税额大
  • 多交企业所得税怎么申请抵缴
  • 固定资产可以一次折旧完吗
  • 购房专票可以抵扣进项税吗为什么
  • 存续在业有什么区别
  • 应收账款记账凭证如何填写
  • 物业公司预收款增值税纳税义务发生时间
  • 小程序嵌入h5页面可以不写安全地址吗为什么
  • 高新企业研发费用比例
  • linux zmodem
  • 城建税申报表怎么作废
  • 利用均匀水流导致的水位变化来显示时间
  • 税金及附加的含义
  • php如何调用类
  • php中函数定义没有返回值类型
  • php签到功能思路
  • 持有至到期投资账务处理
  • css3题目
  • 城建税5%的是什么情况
  • 国际货运代理公司有哪些?
  • css浮动怎么弄
  • 凭证过账后发现了错误,如何处理
  • phpcms不支持https怎么办
  • 补交以前年度环保税会计分录
  • sqlserver数据库和mysql区别
  • 冲销上个月成本的会计分录
  • 长期股权投资与其他权益工具投资的区别
  • 资产处置损益属于什么会计要素
  • 汇算清缴需要传票么
  • 政府扶持资金怎么做账
  • 给客户赞助怎么写合适
  • 清理固定资产的税费
  • 村料采购会计科目有哪些
  • 收到国税退税收怎么做账
  • 支付的劳务派遣服务费计入什么科目
  • 变更公司股东要收费吗
  • 车船税没发票只交可以吗
  • 空调的预计净残值是什么
  • 存储过程 decode
  • 史上最简单的皮筋枪
  • win7怎么调整
  • win8蓝屏解决方法
  • win10音量调节不显示
  • 手把手教你安装实木门
  • mac电脑上的通讯录怎么同步到手机上
  • 金山卫士电脑版
  • spybotsd.exe - spybotsd 是什么文件进程
  • win7系统打印服务怎么开启
  • win7未能启动怎么办
  • win7定时静音
  • win10出现恢复界面0xc000000f
  • org.cocos2d.straydiary
  • 请找到以下
  • windows visual studio openGL开发环境配置
  • 圣食颐年
  • Node.js中的核心模块包括哪些内容?
  • javascript怎么写
  • js中check
  • jquery 动态绑定click事件
  • javascript几种类型
  • 安徽国家税务局网上办税平台12366
  • 诺诺网电子发票下载到手机
  • 平安车险如何开票报销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设