`
cheney463
  • 浏览: 30378 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

HTML中添加虚线

    博客分类:
  • HTML
阅读更多

html里添加虚线

<hr style="border:1px dashed #000; height:1px">

<hr style="border:1px dotted #036" />

<hr style="border : 1px dashed blue;" />

<hr style="border: 1px solid #ff0000"/>
<br>
<hr style="border:1px dashed #0000fff"/>
<br>
<hr style="border:3px dotted #000 "/>
<br>
<hr style="border:2px double #e8e8e8"/>

 

border : border-width || border-style || border-color
取值:
该属性是复合属性。请参阅各参数对应的属性。
默认值为: medium none 。 border-color 的默认值将采用文本颜色。

说明:
设置对象的边框样式。
当你指定了边框颜色( border-color )和边框宽度( border-width )时,你必须同时指定边框样式( border-style ),否则边框不会被呈现。
如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如:设置 border : thin 等于设置 border : thin none ,而 border-color 的默认值将采用文本颜色。因此此前的任何 border-color 和 border-width 设置都会被清除。
在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
对应的脚本特性为 border 。

border-bottom-style版本:CSS2  兼容性:IE4+ NS6+ 继承性:无
语法:
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
取值:
none :  默认值。无边框。不受任何指定的 border-width 值影响
hidden :  隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove :  根据 border-color 的值画3D凹槽
ridge :  根据 border-color 的值画菱形边框
inset :  根据 border-color 的值画3D凹边
outset :  根据 border-color 的值画3D凸边

说明:
设置对象下边框的样式。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
在 IE5.5+ 中,边框属性可以直接应用于内联要素。而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
如果 border-bottom-width 设置为 0 ,本属性将失去作用。
对应的脚本特性为 borderBottomStyle 。
分享到:
评论

相关推荐

    html 图像加虚线框的方法

    在HTML和CSS中,为图像添加虚线框是一种常见的网页设计技巧,用于强调或装饰页面元素。本篇文章将深入探讨如何使用CSS实现这一功能,并提供一个实例文件供您下载研究。 首先,我们要知道HTML中的`&lt;img&gt;`标签用于...

    html 边框虚线.pdf

    在HTML中,有许多常用的标签,如`div`、`span`、`ul`、`li`、`table`、`tr`、`td`等,都可以应用CSS来添加虚线边框。下面我们将详细介绍如何使用CSS来实现这些元素的虚线边框。 1. CSS `border`属性 CSS的`border`...

    html 边框虚线.docx

    除了`&lt;div&gt;`标签,其他HTML元素如`&lt;span&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`、`&lt;table&gt;`、`&lt;tr&gt;`和`&lt;td&gt;`等也可以添加虚线边框。例如,为列表项`&lt;li&gt;`添加虚线边框: ```html ;"&gt; ;"&gt; ;"&gt; ``` 这里我们只设置了顶部边框,可以...

    flex画虚线代码

    - `pointLength`: 虚线中每个点的长度。 - `stepLen`: 每个点之间的间隔长度。 ### 实践应用与扩展 理解这段代码不仅限于学习Flex的Graphics API,还可以应用于其他编程环境中的图形绘制,如HTML5的Canvas API或...

    border虚线样式,带颜色

    当提到“border虚线样式,带颜色”时,我们主要关注的是如何在HTML和CSS中设置元素的边框为虚线,并且赋予其各种颜色,如红色、绿色或黄色。下面将详细介绍这一知识点。 首先,边框样式(border-style)属性允许...

    百度JSAPI显示虚线运动轨迹

    1. **引入百度地图API**:在HTML文件中引入百度地图的JavaScript库,通常以`&lt;script&gt;`标签的形式添加引用。 2. **初始化地图**:使用`BMap.Map`对象创建地图实例,设置地图中心点和缩放级别。 3. **创建路径规划...

    如何去掉图片热点链接或超链接的虚线框?.rar

    在网页设计中,图片热点链接或超链接常常会出现一个默认的虚线框,这通常是浏览器为了突出显示可点击区域而设定的样式。这种效果在某些设计中可能并不符合视觉要求,因此,如何去掉图片热点链接或超链接的虚线框是...

    纯CSS 做的虚线表格

    为了增强表格的可读性和用户体验,我们还可以调整单元格的内边距(padding)、外边距(margin)以及添加背景色、文字对齐方式等样式。例如: ```css td, th { padding: 10px; /* 增加单元格内部的空间 */ text-...

    去掉超链接的虚线框

    将此属性添加到`&lt;a&gt;`标签中,可以有效地隐藏超链接的虚线框。 ```html ;"&gt;链接文本 ``` 此外,也可以使用`onFocus`事件配合`blur()`函数,强制移除焦点,从而避免虚线框的显示。 ```html ()"&gt;尝试 ``` #### 3. ...

    ReactNative虚线组件兼容Android

    1. **安装**:将rn-dashline-master导入到你的项目中,通常通过npm或yarn进行安装,并在项目的package.json文件中添加依赖。 2. **引入**:在需要使用虚线的React组件中,引入rn-dashline组件。 3. **配置**:根据你...

    调用百度地图API显示虚线运动轨迹

    1. **地图初始化**:在HTML页面中引入百度地图API的JavaScript库,然后通过JavaScript代码创建地图实例,设置地图中心点坐标、缩放级别等参数。 2. **坐标数据获取**:运动轨迹是由一系列坐标点组成的,这些点可以...

    将链接的下划线做成虚线

    /* 添加虚线下划线 */ text-decoration-style: dashed; } ``` 这段CSS代码将应用到所有页面中的链接,使它们的下划线变为虚线。如果你只想在特定条件下应用此样式,例如只针对鼠标悬停状态,可以使用`:hover`伪类...

    web设计和制作中虚线的实现

    进入页面制作阶段,我们需要将设计稿中的虚线在HTML和CSS中实现。通常遇到的问题是,CSS的`dotted`和`dashed`属性在不同浏览器下的显示效果可能存在差异,例如IE6对`dotted`的渲染问题,以及`dashed`虚线单元过宽...

    CSS3 SVG叶子虚线显示特效.zip

    在本项目中,“CSS3 SVG叶子虚线显示特效.zip”是一个包含使用CSS3和SVG技术创建的创新视觉效果的资源包。这个特效主要是利用这两种强大的Web技术来制作一种动态的、响应式的叶子图形,其中线条部分以虚线形式呈现,...

    纯HTML CSS JS目录树形框TreeView

    5. **节点图标和虚线**:在纯HTML CSS JS的TreeView中,图标通常通过CSS的`content`属性和`background-image`来实现,可以设置背景图或者使用Unicode字符。虚线分隔线则通过CSS的border属性和box-sizing属性来绘制,...

    去掉点击链接时出现的虚线.rar

    这种现象主要是浏览器为了突出用户当前所选链接的一种表现形式,但在某些设计风格中,这种虚线边框可能并不符合整体的视觉效果。标题“去掉点击链接时出现的虚线”所涉及的知识点,就是如何通过编程技术,特别是...

    css实现a“标签点击无虚线.rar

    在HTML中,`&lt;a&gt;`标签通常用于创建超链接,它可以帮助用户在页面间导航。然而,默认情况下,当鼠标悬停在`&lt;a&gt;`标签上时,浏览器可能会显示一条虚线边框,这在某些设计风格中可能并不符合预期。本教程将深入讲解如何...

    IE浏览器去掉FLASH虚线框的两种方法

    1. **修改HTML属性**:在包含Flash内容的`&lt;object&gt;`或`&lt;embed&gt;`标签中,添加`wmode`参数。例如: ```html codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" ...

    方块虚线PPT流程图图表素材.rar

    在这个素材中,"方块"通常代表流程中的一个步骤或决策点,而"虚线"则起到连接和指示作用,可能表示流程的分支、循环或不确定性。 方块虚线流程图的一个重要特点是其递进性。递进流程图用于展示一系列有序的步骤,每...

    border虚线样式(style)

    在这个例子中,"element"是你想要添加虚线边框的HTML元素的名称。如果你需要同时设置边框的宽度和颜色,可以结合使用`border-width`和`border-color`属性,例如: ```css element { border-style: dashed; border...

Global site tag (gtag.js) - Google Analytics