css - CSS - 如何创建带有圆形和线条渐变的标题背景？

Question

我想创建一个具有这样背景的标题：

但是有一个问题，如图所示，有3种不同的背景：

• 第一个是整个页面
• 第二个只是一个圆圈
• 第三是黑线。

我想创建这个标题，但我有背景问题。

我尝试将 Span 标签包含在标题h3中......没有用。我应该怎么办？PS：我想为所有标题背景制作这个背景，所以我不想只为一个标题创建一个背景，我希望它具有响应性并且在任何标题上看起来都很好。

Answer 1

标记

 <h3>Meet the Team</h3>

样式

h3{
    width:320px;
    height:40px;
    text-align:left;
    background:black;
    color:red;
    padding:10px;
    line-height:40px;
    position:relative;
}

h3:before,h3:after{
    position:absolute;
    content:'';
}
h3:before{
   width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #2C2C2C;
    right: 174px;
    top: 20px;
    box-shadow: inset -2px -1px #3F3D3D;    
}

h3:after{
    width:160px;
    height:4px;
    background:red;
    background: #2C2C2C;
    right: 14px;
    top: 28px;
    box-shadow: inset -2px -1px #3F3D3D; 
}

演示：http: //jsfiddle.net/9U8NQ/