如何虛線邊框

內水平和垂直居中的文本，我需要垂直和水平居中虛線邊框之間的一些文字，如下圖：如何虛線邊框

enter image description here

我有一個very simple fiddle它試圖實現這一目標。

如何修改css以顯示爲附加的截圖？

來源

2012-07-25 user701254

的http：//的jsfiddle .net/eCUv9/16/ – CKKiller 2012-07-25 14:18:27

您可以使用CSS定位來做到這一點...

檢查了這一點：

My Fiddle（水平）

My Fiddle（垂直）

來源

2012-07-25 14:25:22

是否有可能不改變背景顏色，但在同一時間邊框不會出現在這樣的文本後面像這個小提琴：http://jsfiddle.net/aHNh6/4/？ – user701254 2012-07-25 15:02:39

@ user701254不，你必須使用'background-color' abd你的意思是沒有出現或出現？ – 2012-07-25 15:06:56

我的意思是，我想保持與正在繪製文字的背景顏色相同，但同時沒有看到文字後面出現邊框。希望這更有意義。我只能更改文本的背景顏色以匹配正在繪製文本的背景顏色 – user701254 2012-07-25 15:09:45

您可以嘗試使用文本浮動div併爲其放置邊界。

HTML

<div id="dotted"> 
    <div id="text">Text goes here.</div> 
</div>

CSS

#dotted { 
    border-top:1px dotted #000; 
    padding:10px; 
} 

#text { 
    float:left; 
    padding:0 10px 0 10px; 
    margin:-20px 0 0 30px; 
    background:#fff; 
}

JS小提琴：http://jsfiddle.net/aBDjY/2/

來源

2012-07-25 14:13:24 JSW189

是否可以不更改背景顏色，但同時邊框不會出現在文本後面，如此小提琴http://jsfiddle.net/aBDjY/3/ – user701254 2012-07-25 15:03:05

@ user701254。總之，沒有。在這種方法中，我將文本移到邊界上。如果沒有設置背景顏色，則線條將通過文本顯示。希望有所幫助！ – JSW189 2012-07-25 16:02:05

http://jsfiddle.net/lukas2012/aHNh6/5/

你也可以用pseudeoelement工作（：後）

並使用text-align: center與display: inline-block

這樣它會與任何文字工作，你的佈局會不會激怒走動

相對元素要保持的背景色動態只需使用background-color: inherit;

.wrap{ 
    position: relative; 
    margin: 100px auto; 
    width: 500px; 
    text-align: center; 
    background: #ff0; 

} 
.wrap:after { 
    content: ''; 
    border-top:1px dotted #000; 
    position: absolute; 
    left: 0; 
    z-index: 0; 
    top: 50%; 
    width: 100%; 
    height: 1px; 

} 

.text { 
    background-color: inherit; 
    position: relative; 
    margin:0 auto; 
    display: inline-block; 
    z-index: 1; 
}

來源

2012-07-25 14:56:57 Lukas2012

如何虛線邊框

回答

相關問題