温馨提示×

温馨提示×

您好，登录后才能下订单哦！

密码登录×
  • 忘记密码？
登录注册×
获取短信验证码
其他方式登录
点击 登录注册 即表示同意 《亿速云用户服务条款》
  • 服务器
  • 数据库
  • 开发技术
  • 网络安全
  • 互联网科技
登 录 注册有礼
云服务器 香港服务器 高防服务器
最新更新 网站标签 地图导航
产品
  • 首页 > 
  • 教程 > 
  • 开发技术 > 
  • web开发 > 
  • css设置虚线的方法

css设置虚线的方法

发布时间：2021-01-30 09:15:33 来源：亿速云 阅读：1261 作者：小新 栏目： web开发

这篇文章将为大家详细讲解有关css设置虚线的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

css设置虚线的方法：1、创建一个<div>标签，然后给div添加css样式为“border-bottom:red 1px dashed;”；2、通过hr标签设置水平线，然后给hr标签添加border属性即可实现虚线效果。

css设置虚线的方法

通过设置虚线边框来设置虚线：

  • 我们知道在html中<div>标签的边框可以设置为虚线。

所以可以先创建一个<div>标签：

<div class="xuxian"></div>

然后将该边框的高度设置为0，将上边框或者下边框其中一个设置为一个像素的虚线。

具体如下：

.xuxian{
width:100%;
height:0;
border-bottom:red 1px dashed;}
/*red表示虚线的颜色为红色，1px表示边框宽度为一个像素，dashed表示边框线型为虚线*/

效果图：

css设置虚线的方法

  • 在HTML中hr标签同样可以设置水平线，我们可以通过给hr标签设置css样式实现虚线效果。

css代码：

hr{border:blue 1px dashed}

效果图：

css设置虚线的方法

完整代码如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css设置虚线</title>
<style>
    .xuxian{
        width:100%;
        height: 60px;
        border-bottom: red 1px dashed;}
    /*red表示虚线的颜色为红色，1px表示边框宽度为一个像素，dashed表示边框线型为虚线*/
 hr{border:blue 1px dashed}
</style>

</head>

<body>
<div class="xuxian"></div>
<hr>
</body>

</html>

关于“css设置虚线的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

向AI问一下细节
推荐阅读：
  1. hr设置虚线样式的方法
  2. css中设置边框虚线样式的方法

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

css
  • 上一篇新闻：
    jquery如何实现跳转页面功能
  • 下一篇新闻：
    html中如何注释

猜你喜欢

  • vps香港云主机购买怎么使用
  • vps香港云主机购买怎么加速
  • 云服务器带宽计算方法是什么
  • 国内云服务器评测的方法是什么
  • 云服务器双机热备份怎么设置
  • bgp独享云主机租用有哪些优势
  • escapeHTML函数怎么使用
  • inputtype怎么使用
  • vps虚拟主机试用怎么建站
  • 虚拟主机大容量租用怎么设置
最新资讯
  • Cassandra中的数据一致性级别是如何影响读写操作的
  • 如何在Prolog中实现模式匹配
  • Prolog中的迭代器是如何实现的
  • Prolog中的元组是什么如何表示
  • 如何在Prolog中表示图形数据结构
  • Prolog中的约束编程是如何实现的
  • Prolog中如何处理递归的基本情况
  • Prolog中的割点如何影响程序执行
  • Prolog中的逆向脱却是什么概念
  • Prolog中的“;”和“”运算符分别表示什么
相关推荐
  • css设置虚线边框的方法是什么
  • CSS虚线样式的制作方法及虚线样式怎么用
  • css设置下划线为虚线的方法
  • css设置平行虚线的方法
  • css设置边框为虚线样式的方法
  • css中怎么设置虚线上边框
  • css中如何设置虚线上边框
  • css下虚线如何设置
  • css如何设置虚线分割线
  • css如何设置边框的虚线样式

相关标签

div+css scss css属性操作 html css html+css+js html5+css ​css3 html5 css3 css选择器 css语法 html/css animate.css css2 css预处理器 css优先级 css样式表 css盒子模型 css3新特性 css权重 oocss
AI
助
手
产品服务
  • 云服务器
  • 高防服务器
  • 高防IP
  • 裸金属服务器
  • 机柜租用
  • SSL证书
  • 高防CDN
  • 弹性IP
地区划分
  • 中国香港服务器
  • 美国服务器
  • 德国服务器
  • 日本服务器
  • 韩国服务器
  • 新加坡服务器
专题活动
  • 控制台
  • 应用市场
  • 最新活动
帮助支持
  • 帮助中心
  • 网站备案
  • 法律条款
  • 全国服务
  • 安全漏洞
  • 主题地图
关于我们
  • 关于亿速云
  • 客户案例
  • 新闻资讯
  • 资讯地图
  • 问答地图
  • 联系我们
  • 人才招聘
售后咨询
7*24小时在线电话：400-100-2938
7*24小时在线 QQ：800811969
关注亿速云

亿速云公众号

手机网站二维码

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有

广州亿速云计算有限公司 粤ICP备17096448号-1 粤公网安备 44010402001142号增值电信业务经营许可证编号：B1-20181529

两个鬼故事周易起名测名称打分测试青梅竹马是消防员梦见母鸡下蛋副不起名小教室香谱72图解高清大图千金归来第一部叶枣四爷的心尖宠妃免费全文阅读曹锦起名董姓的起名大全美甲美睫店起名字大全给牧羊犬起什麽名字好听夺魂索国际贸易公司起名无修版致我最爱的你生猪宝宝起名用字黑河疫情最新情况起名字庆日伪军馅饼里包了一块天31省区市新增本土病例21例党支部工作职责freetube三个字的的品牌起名大全和平大世界飘飘欲仙下载集团公司名字如何起名店铺起名起什么名快餐店名字大全起名创意少年生前被连续抽血16次?多部门介入两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”淀粉肠小王子日销售额涨超10倍高中生被打伤下体休学 邯郸通报单亲妈妈陷入热恋 14岁儿子报警何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言张家界的山上“长”满了韩国人？男孩8年未见母亲被告知被遗忘中国拥有亿元资产的家庭达13.3万户19岁小伙救下5人后溺亡 多方发声315晚会后胖东来又人满为患了张立群任西安交通大学校长“重生之我在北大当嫡校长”男子被猫抓伤后确诊“猫抓病”测试车高速逃费 小米：已补缴周杰伦一审败诉网易网友洛杉矶偶遇贾玲今日春分倪萍分享减重40斤方法七年后宇文玥被薅头发捞上岸许家印被限制高消费萧美琴窜访捷克 外交部回应联合利华开始重组专访95后高颜值猪保姆胖东来员工每周单休无小长假男子被流浪猫绊倒 投喂者赔24万小米汽车超级工厂正式揭幕黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发当地回应沈阳致3死车祸车主疑毒驾恒大被罚41.75亿到底怎么缴妈妈回应孩子在校撞护栏坠楼外国人感慨凌晨的中国很安全杨倩无缘巴黎奥运校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变王树国卸任西安交大校长 师生送别手机成瘾是影响睡眠质量重要因素国产伟哥去年销售近13亿阿根廷将发行1万与2万面值的纸币兔狲“狲大娘”因病死亡遭遇山火的松茸之乡“开封王婆”爆火：促成四五十对奥巴马现身唐宁街 黑色着装引猜测考生莫言也上北大硕士复试名单了德国打算提及普京时仅用姓名天水麻辣烫把捣辣椒大爷累坏了

两个鬼故事 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化