使用css製做圓弧形背景 | 8月更文挑戰

這是我參與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%;
}
複製代碼