这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度css width)为350像素是为了便于观看演示 其它意思。
一、四边为虚线边框
border:1px dashed #000; 黑色虚线边框
实例:
CSS代码: .divcss5{border:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5">我的四边为黑色虚线边框</div>
这里设置边框缩写方式定义divcss5选择器四边边框为1px的黑色虚线边框

二、左边为虚线:
CSS代码: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-1">我的左边为黑色虚线边框</div>
这里设置了左边一边为黑色虚线边框

三、右边为虚线:
CSS代码: .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-2">我的右边为黑色虚线边框</div>
这里设置了右边一边为黑色虚线边框

四、顶部边(上边)为虚线:
CSS代码: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-3">我的上边为黑色虚线边框</div>
这里设置了顶边(上边线)一边为黑色虚线边框

五、底部边(下边)为虚线:
CSS代码: .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代码: <div class="divcss5-4">我的下边为黑色虚线边框</div>
这里设置了底边(下边线)一边为黑色虚线边框

六、任意一边不为虚线,其它三边为虚线情况
加入右边边框不为虚线而没有边线,其它三边为黑色虚线边框
CSS代码: .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代码: <div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
这里通过先设置了该对象四边为黑色1px虚线边框,紧接着又设置一边边线为0的设置,这样相当于设置了3边的边框虚线属性,但是这里注意边框属性设置前后顺序。

详情链接:http://www.divcss5.com/shili/s296.shtml

html div + css 下划线的更多相关文章

  1. 用CSS下划线距离

    但在我在CSS中新加了TEXT-DECORATION: underline; 后发现下划线离文本太近了,很难看. 代码一: a { text-decoration: none; background: ...

  2. “div+css”下拉菜单

    <style> html, body { margin: 0; padding: 0; } .btn-group{ font-size: 14px; position: relative; ...

  3. CSS 定义上划线、下划线、删除线代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 使用CSS去除 去掉超链接的下划线方法

    我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接 ...

  5. 实现文字下划线 ---模拟text-decoration

    css 的text-decoration可以实现文字下方的下划线,但是距离文字比较近,不是很好看,我们可以使用border-bottom来模拟这个效果 (inline元素虽然不可以设置margin-t ...

  6. jq实现跟随鼠标点击移动的下划线效果

    效果如下: 1.html代码: <div class="center-left-tap"> <a href="javascript:void (0)&q ...

  7. [转]CSS 类名的单词连字符:下划线还是横杠?

    问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.solutionDetail 用横杠连接: solution-title.solution-deta ...

  8. [CSS]textarea设置下划线格式

    功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线  2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加t ...

  9. CSS 类名的单词连字符:下划线还是连接符?

    本文的部分内容整理自我对此问题的解答: 命名 CSS 的类或 ID 时单词间如何连接? - 知乎 问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.s ...

随机推荐

  1. 使用jquery-tmpl使JavaScript与HTML分离

    背景:由于对JavaScript字符串拼接JavaScript变量产生了反感,也想用用JavaScript模板库,看了几个,由于时间原因选择了jQuery.tmpl.js,因为Visual Studi ...

  2. 关于错误处理程序中【return】的用法

    先让俺这位新人帮各位有幸游览到我博客文章的叔叔阿姨哥哥姐姐们解释一下什么是错误处理?即:当程序发生错误时,保证程序不会异常中断的机制. 那么为什么程序中会有错误处理呢?像我们通常无论是玩手机或者玩游戏 ...

  3. SpringBoot使用H2内嵌数据库

    1.驱动 我们知道,JDBC是JDK自带的接口规范,不同的数据库有不同的实现,只需要引入相应的驱动包即可. 在使用MySQL数据库时,引入的是MySQL驱动,相应的,使用H2数据库时,也需要引入H2驱 ...

  4. js split 的用法和定义 js split分割字符串成数组的实例代码

    关于js split的用法,我们经常用来将字符串分割为数组方便后续操作,今天写一段广告判断代码的时候,竟然忘了split的用法了,特整理下,方便需要的朋友, 关于js split的用法其它也不多说什么 ...

  5. /proc/kcore

    [root@b proc]# ls -lh /proc/kcore-r-------- 1 root root 128T Sep 29 09:39 /proc/kcore[root@b proc]# ...

  6. style="display:{{searchInput==='' ? 'none':'block'}} "

    当用户没有有效输入时,是否显示提交按钮 style="display:{{searchInput==='' ? 'none':'block'}} "

  7. $(document).ready() $(window).load 及js的window.onload

    1.$(document).ready()  简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕. 2.$(window).load  在有时候确实我们有需 ...

  8. Linux中权限管理之文件属性权限

    chattr [+-=][选项] 文件或目录名 + 增加权限 - 删除权限 = 等于某权限 选项: i 文件设置i属性,不允许对文件进行删除.改名.添加.修改数据,相当于把整个文件锁起来了 目录设置i ...

  9. Linux学习笔记(2)linux系统信息与进程相关命令

    man 获得命令的帮助手册,如man cp:按q键退出 su 切换用户,如su - root; '-'表示改变用户的环境变量 who 显示系统中登录的用户 w 显示登录用户的详细信息 last 查看最 ...

  10. orange安装文档

    一.Orange简介    Orange是一个基于 OpenResty/Nginx 的 API Gateway,提供 API 及 “自定义规则” 的监控和管理,如访问统计.流量切分.AB 测试.API ...