Question

我有一个带有背景图像的h2标题，如下所示：

＆＃13;

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.title {
    font-size: 18px;
    padding: 10px 4px 20px 4px;
    margin: 0 0 10px;
    background: url('https://i.stack.imgur.com/yco0r.png') center bottom no-repeat;
}

＆＃13;

<h2 class="title">Lorem ipsum</h2>

＆＃13;

由于网站具有响应性，因此图像必须延伸或收缩。所以我宁愿用纯CSS 盒子阴影替换它。

我设法获得了以下效果：

＆＃13;

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.6;
  font-size: 13px;
  margin: 0 0 10px 0;
}

.section_title {
  font-size: 18px;
  margin: 0 0 10px 0;
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 4px -4px rgba(0, 0, 0, .3);
}

＆＃13;

<div class="content_section">
  <h2 class="section_title">About us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, odit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quod repudiandae cupiditate reprehenderit, error aspernatur labore cumque. Optio natus dolores molestiae molestias non totam corrupti.</p>
</div>

＆＃13;

但不幸的是，它有一个常规的形式，而不是更高的＆＃34;在中间，就像我用过的图像一样。

我错过了什么？

Answer 1

让我们看看它是否适合您

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.6;
  font-size: 13px;
  margin: 0 0 10px 0;
}

.section_title {
  font-size: 18px;
  margin: 0 0 10px 0;
  padding: 20px;
  text-align: center;
  box-shadow: 0 3px 56px -21px rgba(0, 0, 0, 1);
}

<div class="content_section">
  <h2 class="section_title">About us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, odit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quod repudiandae cupiditate reprehenderit, error aspernatur labore cumque. Optio natus dolores molestiae molestias non totam corrupti.</p>
</div>

Answer 2

使用border-radius：

使用伪元素来实现此效果

＆＃13;

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.6;
  font-size: 13px;
  margin: 0 0 10px 0;
}

.section_title {
  position: relative;
  font-size: 18px;
  margin: 0 0 10px 0;
  padding: 20px;
  text-align: center;
}

.section_title::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(100% - 12px);
  width: 100%;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 8px 4px -3px rgba(0, 0, 0, .3);
}

.section_title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  background-color: #ffffff;
}

＆＃13;

<div class="content_section">
  <h2 class="section_title">About us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, odit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quod repudiandae cupiditate reprehenderit, error aspernatur labore cumque. Optio natus dolores molestiae molestias non totam corrupti.</p>
</div>

＆＃13;

缺点：您必须在background-color伪元素上定义::after与背景相同，以覆盖阴影的顶部。您可以尝试使用clip并忘记::after元素，但它不具备完整的跨浏览器支持。这些值也是硬编码的，您可以使用百分比和rem / em进行调整（因为box-shadow不支持百分比长度值）。

Answer 3

如何使用径向渐变和更少的代码：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.title {
  font-size: 18px;
  text-align: center;
  padding: 10px 4px 20px 4px;
  margin: 0 0 10px;
  background: radial-gradient(circle at top, #ddd, transparent) 0 100%/100% 4px no-repeat;
}
p {
  line-height: 1.6;
  font-size: 13px;
  margin: 0 0 10px 0;
}

<h2 class="title">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quod repudiandae cupiditate reprehenderit, error aspernatur labore cumque. Optio natus dolores molestiae molestias non totam corrupti.</p>

Answer 4

这是一个有趣的！我做的是我创建了一个没有边框和框阴影的椭圆形。然后绝对将它放在标题下面。此解决方案在Chrome和Edge上进行响应和测试，看起来最接近您最终的结果。我添加了一些注释来解释每种样式的清晰度。 JSBIN：http://jsbin.com/buzuje/edit?html,css,output

＆＃13;

:root {
  --header-size: 20px;
  --body-font-size: 16px;
  --gutter: 10px;
  --gutter-lg: 20px;
  --oval-height: 15px;
  --oval-bottom-adjustment: 0px;
  --oval-blur: 12px;
  --oval-spread: 3px;
  --box-shadow-color: rgba(0,0,0,.2);
}

body {
  background: white;
  font-size: var(--header-size);
}

.section-title {
  
  /* basic styling */
  font-size: var(--header-size);
  font-weight: bold;  
  padding: var(--gutter);
  background: white;
  text-align: center;
  
  /* 
    This enables us to assign this as the containing box 
    for the manually postioned children to this element 
  */
  position: relative;
}


.oval {
  
  border-radius: 50%;
  position: absolute;
  bottom: calc(-1 * var(--oval-bottom-adjustment));
  
  /* comment this out or set to 1 to see the full oval being clipped */
  z-index: -1;

  /* 
    Because the containing box is the padding box for absolutely positioned 
    children, modify the width to account for the padding. 10.1.4.1: 
    https://www.w3.org/TR/CSS21/visudet.html#containing-block-details 
  */
  width: calc(100% - 2*var(--gutter));
  
  /* 
    This defines how "squished" your oval is. Higher makes the oval taller 
    and more 'pointed' 
  */
  height: var(--oval-height);
  
  /* h-offset v-offset blur spread color */
  box-shadow: 0 0 var(--oval-blur) var(--oval-spread) var(--box-shadow-color);
}

p {
  margin: var(--gutter-lg);
  font-size: var(--body-font-size);
}

＆＃13;

  <div class="content_section">
    
      <div class="section-title">
        About Us
        <div class="oval"></div>
      </div>
      
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, odit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quod repudiandae cupiditate reprehenderit, error aspernatur labore cumque. Optio natus dolores molestiae molestias non totam corrupti.</p>
    
  </div>

＆＃13;

提出＆＃34;不规则＆＃34; CSS 3中标题上的框阴影

4 个答案: