在 CSS 3 中的标题上放置 "irregular" 框阴影

Question

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

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;
}

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

由于网站是响应式的，因此图像必须拉伸或收缩。所以我宁愿用 纯粹 CSS box-shadow.

来代替它

我得到了如下效果：

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);
}

<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>

但不幸的是，它有一个规则的形式，而不是中间的 "taller"，就像我使用图像的那样。

我错过了什么？

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

使用一个pseudo-element来实现这个效果，使用border-radius:

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;
}

<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>

缺点：您必须在::after pseudo-element上定义一个background-color与您的背景相同，以覆盖阴影的顶部。您可以尝试使用 clip 并忘记 ::after 元素，但它没有完整的 cross-browser 支持。此外，这些值是 hard-coded，您可以使用百分比和 rem/em 进行调整（因为 box-shadow 不支持百分比长度值）。

Answer 3

radial-gradient 和更少的代码怎么样：

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

这很有趣！我所做的是我创建了一个没有边框和盒子阴影的椭圆形。然后绝对定位到header下。此解决方案具有响应能力并在 Chrome 和 Edge 上进行了测试，看起来最接近您想要的最终结果。为了清楚起见，我添加了一些评论来解释每种样式的作用。 JSBIN：http://jsbin.com/buzuje/edit?html,css,output

: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);
}

  <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>

在 CSS 3 中的标题上放置 "irregular" 框阴影

Putting an "irregular" box shadow on a heading in CSS 3

css

box-shadow