这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

问题一

使用background制作制作一个类似下图的圆弧形渐变背景图

思路

需要在当前的基础上制作一个更大的盒子, 如下图红框部分所示 (比如设置width为150%). 然后通过设置盒子的border-bottom-left-radius 和 border-bottom-right-radius来形成圆弧的效果.

设置好radius以后需要把大盒子往左边拽回一部分距离 (比如往左移动25%), 使得视口部分在大盒子的正中央, 如下图所示. 可以通过position来设置背景大盒子的位置.

代码 (流式布局)

<!-- 焦点图部分 -->
        <div class="banner">
            <!-- 利用一个标签的背景制作了大盒子的背景效果 -->
            <div class="banner-bg"></div>
            <!-- 下面是滑动焦点图部分 -->
        </div>

.banner {
    position: relative;
    width: 100%;
    height: 187px;
    overflow: hidden;
}

.banner .banner-bg {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 145px;
    background-color: #C82519;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    background-image: linear-gradient(0deg, #f1503b, #c82519 50%);  /* 渐变 */
}

问题二

使用图片制作一个如下的弧形背景图

思路

与上面思路相同的一点是: 都需要制作一个大盒子, 并且通过设置盒子的border-bottom-left-radius 和 border-bottom-right-radius来形成圆弧的效果.

不同点在于: 在下面的代码中, 没有直接设置一个宽度为150%的大盒子, 而是设置一个宽度为100%和盒子, 通过在左右两侧各padding一个25%的值来得到一个大盒子. 对于<a>和<img>标签来说, 就不需要进行额外的宽度设置了.

有一个值得注意的点是这次的overflow: hidden 直接设置给了父元素<div>, 通过隐藏超出部分而使子元素只能显示圆弧内的部分, 而不是直接在子元素上设置圆弧.

这时候图片距离左边是有一定距离的, 这是因为父元素设置了padding, 这个值为25%. 但这时不能直接将整个父元素表示出的大盒子向左移动25%, 这是因为这个25%是针对宽度100%而言的, 而加上左右两边的padding后整个大盒子的宽度为150%, 因此需要向左移动的距离为150%的25%, 也就是25%/150% = 1/6 = 16.666%. 所以正确的方法应该是向左移动16.666%, 而不是25%

代码

<!-- 焦点图部分 -->
    <div class="focus">
        <a href="#">
            <img src="images/banner.jpg" alt="">
        </a>
    </div>

/* 焦点图样式 */
.focus {
  width: 100%;
  padding: 0 25%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  transform: translateX(-16.666%);
  overflow: hidden;
}
.focus a {
  display: block;
}
.focus a img {
  display: block;
  width: 100%;
}