DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程
--------------------------------------------------------------------------------
DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程。
本节为大家介绍常见的CSS 虚线及DIV教程。CSS虚线下划线、列表虚线统统搞定。
目录CSS虚线边框
CSS超链接虚线下划线
列表型CSS虚线下划线
CSS定义一条水平虚线
1、CSS边框虚线 - TOP
这里通过边框属性的虚线边框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边的边框虚线属性，但是这里注意边框属性设置前后顺序。
以上实例完整DIV+CSS代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明www.divcss5.com</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* www.divcss5.com实例 */
</style>
</head>
<body>
www.divcss5.com css虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>
文章来自：http://www.divcss5.com/shili/s296.html
分享到：
相关推荐
黑色虚线边框[code/]实例： CSS代码： [code].divcss5{border:1px dashed #000; height:50px;width:350px} Html代码：复制代码代码如下:<div class=”divcss5″>我的四边为黑色虚线边框</div> 这里设置边框缩写方式
【CSS和Div+CSS布局详解】 CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。在网页设计中，`div+css`布局是一种常见的网页布局方式，它将结构...
`text-decoration`属性用于设定文本的装饰，例如下划线（underline）、无下划线（none）、虚线（dashed）、实线（solid）和双线（double）等。 【背景】 `background`属性可设置元素的背景颜色、图片等，背景图片...
- `dashed`：虚线边框。 - `solid`：实线边框。 - `double`：双实线边框。 - `groove`：沟槽样式边框。 - `ridge`：脊状样式边框。 - `inset`：内嵌样式边框。 - `outset`：突出样式边框。 - **border-color...
边框属性包括`border-width`, `border-style`, 和 `border-color`，它们分别控制边框的宽度、样式（如实线、虚线等）和颜色。例如，`border: 2px solid red;`会给元素添加一个2像素宽、红色的实线边框。 【CSS背景...
- **边框(border)**: 边框包括`border-width`（边框宽度）、`border-style`（边框样式，如实线、虚线等）和`border-color`（边框颜色）。 - **背景(background)**: `background`属性用于设置元素的背景颜色、图像、...
.divcss5 { border-left: 1px solid #00F; } 五、在盒子 DIV 右侧加边框 可以使用 border-right 属性来给 DIV 的右侧加边框。例如，以下代码实现了 1px 实线红色边框： div { border-right: 1px solid #F00; } ...
` 边框样式，有多种选择如solid（实线）、dotted（点线）、dashed（虚线）、double（双线）等。 - `border:1px solid #000000;` 边框的综合缩写，顺序为：宽度 样式 颜色。 - 可以分别设置四个方向的边框，如`...
`表示1像素的黑色虚线边框。 3. **边框样式**： - `divcss5-1`这样的类名用于特定的Div样式，如设置左边的边框为黑色虚线。例如：`.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}`。若要使...
以上列举了在`div_css`制作中常用的CSS属性，掌握这些属性可以帮助开发者更好地控制网页布局、美化界面以及提高用户体验。通过不断的实践和学习，你会逐渐熟悉这些属性，并能够在实际项目中灵活运用。
在"CSS标签大全divcss.pdf"中，主要涵盖了CSS的一些核心概念和常见属性，包括字体属性、背景属性、区块属性、方框属性、边框属性、列表属性以及定位属性。以下是这些属性的详细说明： 1. 字体属性（Font）： - `...
- **去除虚线**：可以通过CSS取消链接的下划线，如`a {text-decoration: none;}`。 - **过渡动画**：可以添加CSS3的过渡效果，如`transition`，让内容切换更平滑。 - **响应式设计**：确保标签切换在不同屏幕尺寸下...
CSS中的 `text-decoration` 属性可以用于设置文本的下划线、删除线等装饰效果。 - **Default** [di'fɔ:lt] - 默认。CSS中的默认样式是指未通过样式表显式定义的样式。 - **Definition** [,defi'niʃən] - 定义。...
CSS还定义了一个无序列表`<ul>`，其中的每个列表项`<li>`代表每一页的内容，具有一定的高度和内边距，并设置下划线为虚线。此外，每个列表项内部的链接`<a>`用于导航，而`<span>`元素则用于显示提示信息，比如当前...
CSS中`border-style:dashed`用于创建虚线边框。 - **Display**: 显示。CSS中的`display`属性用于定义元素的渲染方式，如`block`、`inline`等。 - **Decimal**: 十进制。数值的一种表示形式，在CSS中用于表示数值大小...
《CSS学习手册——结合Div布局》 在网页设计领域，CSS（Cascading Style Sheets）是一种不可或缺的语言，它用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。本手册将深入浅出地介绍CSS，特别是...
- **border-style**：定义边框样式，如实线、虚线等。例如： ```css div { border-style: solid; } ``` - **border-top**、**border-right**、**border-bottom**、**border-left**：一次性定义四个方向的边框样式...
1. **选择器**：CSS2.0提供了广泛的选择器，包括标签选择器（如`p`），类选择器（如`.myClass`），ID选择器（如`#myID`），以及更复杂的选择器组合，如后代选择器（`div p`）和兄弟选择器（`div ~ p`）。 2. **盒...