是否可以在不使用包装的情况下创建此样式？

我需要创建以下样式：

enter image description here

约束：只能用CSS。该字段由内容管理系统生成为h3标签。不能写HTML将它放入包装中。宁愿不使用背景图片，因为客户端没有给我一个。不能诉诸于JavaScript，因为这种风格需要适用于多个页面，并且我在使用的环境中没有全局的JavaScript文件。

这里有一个小提琴：http://jsfiddle.net/d7qrLLug/

来源

2014-10-06 user4055428

你可以做到这一点使用CSS边框：

JS Fiddle

h3 { 
    color: #FFF; 
    text-transform: uppercase; 
    background-color: #423025; 
    padding: 5px; 
    border-top: 1px solid white; 
    border-bottom: 1px solid white; 
    border-style: double; 
    border-width:4px; 
    border-left: none; 
    border-left: none; 
}

来源

2014-10-06 17:26:44

好，但请注意，这将将元素的高度增加8个像素。 – Arbel 2014-10-06 17:44:57

可以通过将顶部和底部填充更改为1px而不是5px来解决该问题。 – 2014-10-06 17:46:46

你可以做到这一点使用之前和之后的伪元素。

h3:before, h3:after { 
border-top: solid 1px white; 
content: ""; 
display: block; 
}

看到这个的jsfiddle： http://jsfiddle.net/d7qrLLug/5/

来源

2014-10-06 17:30:32 Victor

这实际上是非常简单的：

演示：http://jsfiddle.net/d7qrLLug/11/

h3 { 
    color: #FFF; 
    text-transform: uppercase; 
    background-color: #423025; 
    padding: 5px; 
    position:relative; 
} 
h3:before { 
    position:absolute; 
    top: 3px; 
    display:block; 
    width:100%; 
    content:" "; 
    border-top: 1px solid #fff; 
} 
h3:after { 
    position:absolute; 
    bottom: 3px; 
    display:block; 
    width:100%; 
    content:" "; 
    border-top: 1px solid #fff; 
}

注：您需要绝对定位210和:after不改变生产h3元素的原始高度，如果不是重要的，这将做的工作：

演示http://jsfiddle.net/d7qrLLug/12/

h3:before, 
h3:after { 
    display:block; 
    width:100%; 
    content:""; 
    border-top: 1px solid #fff; 
}

来源

2014-10-06 17:34:02 Arbel

是否可以在不使用包装的情况下创建此样式？

回答

相关问题