CSS如何定义一条水平虚线?

html-css023

CSS如何定义一条水平虚线?,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：div {height:60pxborder-bottom:1px dashed}。

3、浏览器运行index.html页面，此时通过css定义了一个水平的虚线。

在网页前端设计过程中，少不了要使用边框，这样页面整体好看一些。边框通常分为两种，一种为实边框另一种为虚边框，实边框用得多一些，但有虚线或虚线边框点缀，网页会更漂亮，所以这两种边框都要使用。

在CSS中，设置边框用border属性，通常需要设置三个值，分别为：宽度、线条样式和颜色。把线条设置为实线或虚线主要设置线条样式，它主要有两个值，即：solid 和 dashed，前者表示实线，后者表示虚线。

一、CSS设置虚线

html代码：

CSS设置虚线

使用dashed

CSS样式：

.uldashed{border:1px solid #c22159width:300pxheight:60pxmargin:0padding:0line-height:26px}

.uldashed li{border-bottom:1px dashed #c22159list-style:none}

效果图：CSS设置虚线

使用dashed

以上CSS样式是给ul的每一行设置一条虚线，虚实结合比单用实线好看得多。在实际应用中，最后一行的虚线要隐藏掉，这样美观一些，只要再设置一个CSS样式把 border-bottom 设置为 none 即可。

二、CSS设置虚线边框

html代码：

CSS设置一虚线

使用dashed

CSS样式：

.uldashedborder{border:1px dashed #c22159width:300pxheight:60pxmargin:0padding:0line-height:26pxpadding-bottom:23px}

.uldashedborder li{border-bottom:1px solid #c22159list-style:none}

效果图：CSS设置一虚线

使用dashed

以上的CSS样式是把边框设置为虚线，把行的底部设置为实线，跟上边恰好相反，效果没有上边的好看。一般来说，虚线常常用于实线边框内。

三、CSS 长虚线边框

html代码：

长虚线边框

CSS样式：

.longDashedBorder{position:relativemargin:68px 0 0 130pxheight:44pxwidth:86pxdisplay:inline-blockborder:dashed 1px #b200fftransform:scale(4)overflow:hidden}

.text{position:relativemargin:-54px 0 0 -106pxfloat:leftheight:150pxwidth:300pxline-height:28pxdisplay:inline-blocktransform:scale(0.28)}

效果图：

ee96bd1776d77c7f7c565d5cc3bf1f47.png

以上长虚线边框用 Css 放大属性 scale 实现，这样虚线会增长但不会加宽；如果只增长 X 轴方向，可以用 scalex；如果只增长 Y 轴方向，可以用 scaley。使用 scale，除放大边框外，还放大其它元素，需要把它们调回来，比较麻烦。

四、CSS 虚线间距

html代码：

CSS样式：

.dashedSpace {

width:350px

height:1px

margin-top:10px

background-image:linear-gradient(to right, #b200ff 0%, #b200ff 50%, transparent 50%)

background-size:28px 1px

background-repeat:repeat-x

}

.linear {

background-image: linear-gradient(to right, #ccc 0%, #b200ff 50%, transparent 50%)

background-size:40px 1px

}

效果图：

03cc24f8ec77382a351b9b73a6a9f5eb.png

dashed 样式的虚线不能调间距，只能用渐变生成函数 linear-gradient()，to right 表示从左到右渐变，#ccc 0% 表示起点颜色和颜色百分比，#b200ff 50% 表示终点颜色和颜色百分比，transparent 50% 表示透明度。