- 1、本文档共5页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
CSS虚线实现方法及多种应用实例
CSS虚线实现⽅法及多种应⽤实例
很多css初学者在前端开发过程中,经常会⽤到css虚线样式,但是不知道css虚线样式
该如何 现,⽐如⼀个css这样写:border-style:dotted solid double dashed; 出来的框就
是:上边框是点状,右边框是 线,下边框是双线,左边框是虚线,如果⼀个css这样
写:border-bottom:1px dashed #000000;出来的框就是⼀条宽度为1像素的⿊⾊下划虚线
···css关于“线”的类型还真是挺多的,其中新⼿们⽐较关注的还是“虚线的 现⽅法” 。
css虚线实现⽅法
定义和⽤法:
border-style 属性⽤于设置元素所有边框的样式,或者单独地为各边设置边框样式。只
有当这个值不是none时边框才可能出现。
这⾥边框属性的虚线边框border控制虚线。以下配置的css ⾼度(css height)和css 宽度
(css idth)为350像素。
1、四边为虚线边框
border:1px dashed #000; ⿊⾊虚线边框
例:
CSS代码: .hackhome{border:1px dashed #000; height:50px;width:350p
Html代码: div class="hackhome">我的四边为⿊⾊虚线边框 /div>
这⾥配置边框缩写形式解释hackhome挑选器四边边框为1px的⿊⾊虚线边框
2、左边为虚线:
CSS代码: .hackhome-1{border-left:1px dashed #000; height:50px;wid
Html代码: div class="hackhome-1">我的左边为⿊⾊虚线边框 /div>
这⾥配置了左边⼀边为⿊⾊虚线边框
3、右边为虚线:
CSS代码: .hackhome-2{border-right:1px dashed #000; height:50px;wi
Html代码: div class="hackhome-2">我的右边为⿊⾊虚线边框 /div>
这⾥配置了右边⼀边为⿊⾊虚线边框
4 、顶部边(上边)为虚线:
CSS代码: .hackhome-3{border-top:1px dashed #000; height:50px;widt
Html代码: div class="hackhome-3">我的上边为⿊⾊虚线边框 /div>
这⾥配置了顶边(上边线)⼀边为⿊⾊虚线边框
5、底部边(下边)为虚线:
CSS代码: .hackhome-4{border-bottom:1px dashed #000; height:50px;w
Html代码: div class="hackhome-4">我的下边为⿊⾊虚线边框 /div>
这⾥配置了底边(下边线)⼀边为⿊⾊虚线边框
6、随意⼀边不为虚线,其它三边为虚线状况
参与右边边框不为虚线⽽没有边线,其它三边为⿊⾊虚线边框
CSS代码: .hackhome-5{border:1px dashed #000;border-right:0; heigh
Html代码: div class="hackhome-5">我的右边边框⽆边线⽽其它三边为⿊⾊虚线边
这⾥先配置了该对象四边为⿊⾊1px虚线边框,紧接着又配置⼀边边线为0 的配置,这
样相当于配置了3边的边框虚线属性,但是这⾥留意边框属性配置前后顺序
常⽤css虚线样式
例1
border-style:dotted solid double dashed;
上边框是点状
右边框是 线
下边框是双线
左边框是虚线
例2
border-style:dotted solid double;
上边框是点状
右边框和左边框是 线
下边框是双线
例3
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是 线
例4
border-style:dotted;
所有 4 个边框都是点状
怎么⽤CSS实现链接的虚线下划线效果
修改您的样式表,找下边这段 (⼀般都在开头)
a {
color:#3399FF;
font-weight:Normal; /*字体效果 普通 可 改成bold粗体*/
text-decoration:none; /*下划线效果:⽆下划线*/
}
a:hover {
color:#4499EE;
text-decoration:none; /*下划线效果:⽆下划线*/
border-bottom: 1p
您可能关注的文档
- chap10逻辑备份与恢复.ppt
- chap2 基本数据类型与运算.ppt
- chap6二维变换及二维观察.pdf
- chapter 9 静电场-电势 3.pdf
- Chapter A-J2EE介绍.ppt
- CHAR04顺序结构.pdf
- CIRISPR系统背景.pdf
- Cisco 7600系列SPA接口处理器SIP-600.pdf
- CISCO IOS的基本操作.pdf
- CK238防盗主机说明书.pdf
- 艾默生Enydrive系列变频器基础知识介绍.ppt
- 案例赏析——皖南古村落优秀PPT.ppt
- 资产管理研究预测报告-资产管理产业园区定位规划及招商策略咨询预测报告(2024-2028年).pptx
- 建筑检测研究报告建筑检测产业规划专项研究报告(2020-2023年).pptx
- 家教服务研究预测报告-家教服务项目商业计划书(2024-2028年).pptx
- 语文五年级作文辅导读书(完整版)3.pptx
- 期中考前易错小题狂做171题牛津译林版八年级英语下册.doc
- 九年级英语全册Unit5WhataretheshirtsmadeofSectionB2e-selfcheck课件(完整版).pptx
- 动漫研究报告-动漫产品入市调查研究报告(2020-2023年).pptx
- 家畜饲料研究报告-家畜饲料企业创业板IPO上市工作咨询指导报告2023年.pptx
文档评论(0)