括号样式边框元素周围 [英] bracket style border around elements

问题描述

我正在寻找一种方法来在< h2> 标题周围实现括号样式边框;我附上了一张图片，显示了我想要完成的内容。

我能想到的唯一的方法是使用图片，我不确定如何这样做（我的所有< h2> 的长度/高度不同，或者如果有更好的方法。

非常感谢任何提示和洞察力。

**我讨厌复活这个，但我可以向是更新图像的问题的解决方案？正确的行太远了，以及文本上下的一些不透明度问题。

UPDATE：

解决方案

工作jsFiddle示例

使用以下内容您只需要更改文本的字体或替换图像，或者更改边框的颜色以匹配您的边框。
对于HTML：

 < div id =h2pre>< / div& 
< h2> 
< div id =h2inpre>< / div> 
< div id =h2cont>准备好迎接一生的活动？< br /> 
我们很乐意听到你的声音。 
< / div> 
< div id =h2inpos>< / div> 
< / h2> 
  

对于CSS：

  h2 {
 text-align：center; 
 position：relative; 
 margin-left：50％; 
 left：-150px 
} 
 
 div {float：left; } 
 
＃h2inpre，＃h2inpos {
 background-color：#fff; 
 height：50px; 
 width：20px; 
 border-bottom：1px solid＃FFA500; 
 border-top：1px solid＃FFA500; 
} 
 
＃h2inpre {
 border-left：1px solid＃FFA500; 
} 
 
＃h2inpos {
 border-right：1px solid＃FFA500; 
 clear：right; 
} 
 
＃h2cont {
 font-family：Arial，sans-serif; 
 padding：5px; 
 background-color：#fff; 
} 
 
＃h2pre {
 height：1px; 
 width：100％; 
 background-color：＃FFA500; 
 margin-top：25px; 
 position：absolute; 
 float：none; 
} 
  

I'm looking for a way to implement a bracket style border around my <h2> headings; I've attached an image showing exactly what I'm trying to accomplish.

The only way I can think of to achieve this effect is by using images, but I'm unsure of exactly how to do so(all of my <h2>s are of varying length/height, or if maybe there is a better way.

Any tips & insight are greatly appreciated.

**I hate to resurrect this, but what can I look towards as being the solution to the problem shown int he updated image? The right line is too far right, as well as some opacity issues above and below the text..

UPDATE:

解决方案

Working jsFiddle example.

Use the following. You just need to change the font of the text or replace it for an image, and maybe change the color of the borders to match yours. For the HTML:

<div id="h2pre"></div>
<h2>
    <div id="h2inpre"></div>
    <div id="h2cont">Ready for the event of a lifetime?<br/>
    We'd love to hear from you.
    </div>
    <div id="h2inpos"></div>
</h2>​

For the CSS:

h2{
   text-align:center;  
   position:relative;    
   margin-left:50%;
   left:-150px
}

div{ float:left; }

#h2inpre, #h2inpos{
   background-color:#fff;
   height:50px;
   width:20px;
   border-bottom:1px solid #FFA500;
   border-top:1px solid #FFA500;
}

#h2inpre{
       border-left:1px solid #FFA500;   
}

#h2inpos{
     border-right:1px solid #FFA500;   
    clear:right;
}

#h2cont{
 font-family:"Arial",sans-serif;
 padding:5px;
 background-color:#fff;
}

#h2pre{
   height:1px;
    width:100%;
    background-color:#FFA500;
    margin-top:25px;
    position:absolute;
    float:none;
}

​

这篇关于括号样式边框元素周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！