用css實(shí)現(xiàn)自定義虛線邊框

開發(fā)產(chǎn)品功能的時(shí)候ui往往會(huì)給出虛線邊框的效果圖，于是乎，我們往往第一時(shí)間想到的是用css里的border，可是border里一般就提供兩種效果，dashed或者dotted，ui這時(shí)就不滿意了，說虛線太密了。廢話不多說，下面直接給解決方案（參考css揭秘）：

10多年的望花網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整望花建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“望花網(wǎng)站設(shè)計(jì)”,“望花網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

div {

padding: 1em;

border: 1px dashed transparent;

background: linear-gradient(white,white) padding-box,

repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em,white 0,white 0.75em);

}

參考圖：

表格邊框以虛線顯示的css樣式

表格邊框默認(rèn)是以實(shí)線進(jìn)行顯示的，怎么才能把它變成虛線呢？其實(shí)很簡(jiǎn)單只要簡(jiǎn)單加一些樣式屬性便可搞定，希望下面的例子對(duì)大家有所幫助

復(fù)制代碼

代碼如下:

style

.table5{text-align:center;

border:1px

solid

#cccccc;

border-radius

:3px;

background-color:#FFFFFF;

width:650px;}

.table5

td{border-bottom:1px

dashed

#cccccc;}

.table5

.last

td{border-bottom:0;}

/style

復(fù)制代碼

代碼如下:

table

width="100%"

border="0"

cellpadding="2"

cellspacing="0"

class="table5"

tr

td

colspan="4" /td

/tr

tr

td

width="4%"img

src="images/greendot.jpg"

width="4"

height="4"

//td

td

width="17%"

class="text-fl"萍水相逢/td

td

width="63%"

align="center"

class="text-fl"消費(fèi)10個(gè)金幣，對(duì)換10元手機(jī)費(fèi)/td

td

width="16%"

align="center"

valign="middle"2013.01.20/td

/tr

tr

class="last"

td

img

src="images/greendot.jpg"

//td

td

class="text-fl"M萍水相MM/td

td

align="center"

class="text-fl"消費(fèi)500積分，對(duì)換500粉絲/td

td

align="center"

valign="middle"2013.01.20/td

/tr

tr

td

colspan="4"/td

/tr

/table

css怎么設(shè)置邊框虛線為圓點(diǎn)而不是方的

!DOCTYPE?html

html?lang="en"

head

meta?charset="UTF-8"

titletest/title

style

div?{

text-align:?center;

margin-bottom:?20px;

width:?100px;

height:?100px;

line-height:?100px;

}

.a?{

/*圓點(diǎn)*/

border:?10px?dotted?red;

}

.b?{

/*實(shí)線*/

border:?10px?solid?red;

}

.c?{

/*雙實(shí)線*/

border:?10px?double?red;

}

.d?{

/*虛線*/

border:?10px?dashed?red;

}

/style

/head

body

div?class="a"

圓點(diǎn)

/div

div?class="b"

實(shí)線

/div

div?class="c"

雙實(shí)線

/div

div?class="d"

虛線

/div

/body

/html

如何用css做一個(gè)細(xì)虛線邊框表格

style type="text/css"

!--

.dashed_tbl {

border-top: 1px dashed #333333;

border-left: 1px dashed #333333;

}

.dashed_tbl td{

border-bottom:1px dashed #333333;

border-right:1px dashed #333333;

padding:3px 10px;

}

--

/style

table cellpadding="0" cellspacing="0" class="dashed_tbl"

tr

td123/td

td234/td

td345/td

/tr

tr

td123/td

td234/td

td345/td

/tr

tr

td123/td

td234/td

td345/td

/tr

/table

是不是這樣的?

CSS如何定義一條水平虛線?

需要準(zhǔn)備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的style標(biāo)簽中，輸入css代碼：div {height:60px;border-bottom:1px dashed}。

3、瀏覽器運(yùn)行index.html頁(yè)面，此時(shí)通過css定義了一個(gè)水平的虛線。