是否有可能使用CSS（不使用圖像）做到這一點「一半刪除線」

我正在做一個網站，而不使用任何圖像，使其響應速度更快，只有CSS（3）。我試圖用做以下效果CSS是否有可能使用CSS（不使用圖像）做到這一點「一半刪除線」

pseudo strikethrough in Illustrator

我曾經做到這一點使用

<div class="strikethrough"> 
    <span>Ou</span> 
</div>

和CSS（使用圖像）：

.strikethrough { 
    background: url('strip.gif') repeat-x 50% 50%; 
} 

.strikethrough span { 
    background: #EAEBEC; 
    padding: 0 5px; 
    display: inline-block; 
    margin: 0 auto; 
}

是有可能只用CSS做同樣的事情？

來源

2013-04-20 pocesar

我會堅持與圖像。它就像200字節（如果正確完成）並向後兼容。 – Blender 2013-04-20 05:15:40

<div style="height: 1px; text-align: center; background-color: black;"> 
    <span style="position: relative; top: -0.5em; background-color: white;"> 
    Ou 
    </span> 
</div>

或

<fieldset style="text-align: center; border: 0; border-top: 1px solid black;"> 
    <legend> 
    Ou 
    </legend> 
</fieldset>

來源

2013-04-20 05:05:09 Jack

真棒，它的作品！ – pocesar 2013-04-20 05:14:25

有沒有辦法讓它繼承當前頁面的背景？有些頁面是白色的，有些頁面是淺灰色的，可以使它自動繼承？ – pocesar 2013-04-20 16:33:55

我添加了另一個選項來回答。 – Jack 2013-04-20 17:09:49

div 
{ 
text-align: center; 
} 

span 
{ 
display: inline-block;  
} 

span:before, 
span:after { 
border-top: 3px solid #EAEBEC; 
display: block; 
height: 1px; 
content: " "; 
width: 48%; 
position: absolute; 
left: 0; 
top: 1.2em; 
} 

span:after 
{ 
right: 0; 
left: auto; 
}

<div> 
    <span>OU</span> 
</div>

來源

2013-04-20 05:22:34

看起來我太遲了，但無論如何它在這裏。 - jsFiddle

編輯 - 增加了代碼different風格和更新的jsfiddle

CSS

.strikethrough{ 
    box-shadow: 
     0px -10px 0px 0px #EAEBEC inset, inset 0px -11px 0px 0px black; 
    background: #EAEBEC; 
    padding: 0 5px; 
    display: block; 
    text-align:center; 
} 
.strikethrough span{ 
    background:#EAEBEC; 
} 

.different{ 
    background:white; 
} 
.different .strikethrough{ 
    box-shadow: 
     0px -10px 0px 0px #fff inset, inset 0px -11px 0px 0px black; 
    background: #fff; 
    padding: 0 5px; 
    display: block; 
    text-align:center; 
} 
.different .strikethrough span{ 
    background:#fff; 
}

HTML

<div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span> </div> 

<div class="different"> 
    <div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span> 

    </div> 
</div>

來源

2013-04-20 05:24:51 apaul

這種方法的小優點。該文本仍然是內嵌的正常格式的文本 – apaul 2013-04-20 05:29:53

有沒有辦法讓它繼承當前頁面的背景？有些頁面是白色的，有些頁面是淺灰色的，可以使它自動繼承？ – pocesar 2013-04-20 16:34:12

它看起來像背景顏色可以繼承，但不是框陰影顏色。查看我更新的工作方法的答案。 – apaul 2013-04-20 16:58:37

是否有可能使用CSS（不使用圖像）做到這一點「一半刪除線」

回答

相關問題