CSS3創建的設計方式虛線框

-5

我有這樣的設計，一個虛線框：CSS3創建的設計方式虛線框

enter image description here

什麼用CSS3創造最好的方法？

我試圖使用'border：dashed' - 但它看起來不像我需要的設計。

我不知道是否有一種方法只用css來做到這一點，而無需使用背景圖片

來源

2013-10-30 eyal halperin

有誰知道爲什麼（顯然是正確的）答案正在向下投？我投票結束這個問題，因爲沒有顯示任何努力，也沒有提供任何代碼作爲問題的背景，但是如果那些試圖幫助的人看起來好像根據問題的缺點而受到懲罰。 –

同意。由於OP被編輯以表明使用提供的答案「看起來不像我需要的設計」。 –

嘗試用兩個DIV盒子實現它

<!DOCTYPE html> 
<html> 
<head> 
<style> 

#outside { 
width:400px; 
height:150px; 
border-style:dashed; border-width:3px; 
position: relative; 
} 
#inside { 
background-color: white; 
width:404px; 
height:154px; 
position: absolute; 
top:-2px; 
left:-2px; 
} 
</style> 
</head> 

<body> 
<div id="outside"> 
<div id="inside"> 
</div> 
</div> 
</body> 

</html>

http://jsfiddle.net/RH5R3/

來源

2013-10-30 12:01:09

謝謝！這看起來很多謊言的設計 –

所以顯然'邊框式：破碎; border-width：3px;即使你說'border：dashed'看起來不正確，也是可以接受的。嘆！ –

越厚，你的外部div的邊界寬度越長，虛線就越長。但不要忘記調整內部div的大小。 –

.box { 
    width: 400px; 
    height: 200px; 
    border: dashed 1px gray; 
}

的jsfiddle：http://jsfiddle.net/8Gxys/

來源

2013-10-30 11:43:12 ProgramFOX

border:1px dashed grey;

JSFiddle

來源

2013-10-30 11:43:17

Try this: 

    css: 

     #xx { 
      width: 400px; 
      height: 200px; 
     } 


     HTML: 

     <div style="border:dotted"" id="xx"></div>

來源

2013-10-30 11:50:58

CSS3創建的設計方式虛線框

回答

相關問題