CSS虚线实现方法及多种应用实例.pdfVIP

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: 1px #0099CC dotted /*加⼀个只