网页设计中的边框代码如何做？

用到CSS样式和HTML标签元素,为了对html不同标签加边框虚线,我们选择几个常用标签对齐设置边框虚线效果.

1、html常用标签:p标签spanullitabletrtd

2、实例用到CSS属性单词:borderwidthheight

3、实现虚线的CSS重点介绍

border为边框属性,如果要实现对象边框效果,要设置边框宽度、边框颜色、边框样式（实线还是虚线）.

border:1pxdashed#F00这个就是设置边框样式宽度为1px虚线,虚线为红色.

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

在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% 表示透明度。

虚线不用切片，布局的时候在Dreamweaver中用样式表实现就可以了

我比较习惯用高度等于行高宽度3PX的图片底部加1PX小点，样式表里添加为背景图片，然后添加给<ul>。如果样式表实现不了的虚线效果，就可以使用图像，但是样式表可以实现的效果就直接用样式表做，加到ul上面也是可以的，如果不用图像可以设置li的底边框，同时给个内补丁就行了

虚线可以放大6400倍后切两个象素(重复的),然后在Dreamweaver中设置为背景,就可以成为一条线.

---