完成彎曲的邊框不僅角落

Question

我有一個模板照片來爲它創建HTML。

問題是用箭頭標記在圖像中。在滑塊下有一個部分，它有一個彎曲的邊界（淺藍色），我試圖用border-radius屬性來實現它，並且我對它做了很多調整。畢竟只是角落彎曲或半徑比我所需要的更多。我如何在CSS中實現它？謝謝。

Answer 1

您可以製作一個寬度超過100％的大元素，併爲其添加邊框半徑。下面是我的意思的例子：

.bigCircle { 
    background: #ffffff; 
    height:500px; 
    width:200%; 
    margin-left: -50%; 
    border-radius: 100%; 
    margin-top: 100px; 
} 

body { 
 
    background: #000000; 
 
    overflow-x: hidden; 
 
} 
 
.bigCircle { 
 
    background: #ffffff; 
 
    height:500px; 
 
    width:200%; 
 
    margin-left: -50%; 
 
    border-radius: 100%; 
 
    margin-top: 100px; 
 
    border: 10px solid #00AAFF; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    font-family: Arial, sans-serif; 
 
}

<div class="bigCircle"> 
 
    <p> Wow you're huge!</p> 
 
</div>

編輯：刪除Codepen鏈接，並添加一段代碼。

Answer 2

只要有巨大的圓形物體定位，以適應設計：

.wrapper { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 900px; 
 
    border: 1px solid #ddd; 
 
} 
 
.curve { 
 
    position: absolute; 
 
    width: 100%; 
 
    left:0; 
 
    top: 0; 
 
    height: 200px; 
 
    overflow: hidden; 
 
} 
 
.curve:after { 
 
    content: ''; 
 
    display: block; 
 
    border-radius: 50%; 
 
    width: 2000px; 
 
    height: 1000px; 
 
    top: 0; 
 
    position: absolute; 
 
    left: -750px; 
 
    border: 3px solid blue; 
 
}

<div class="wrapper"> 
 
    <div class="curve"></div> 
 
</div>

Answer 3

的邊界半徑CSS屬性可以定義邊框邊角圓潤怎麼是。每個角的曲線用一個或兩個半徑定義，定義其形狀：圓形或橢圓形。

希望這將有助於使模板照片的曲線邊框。

/* The syntax of the first radius allows one to four values */ 
/* Radius is set for all 4 sides */ 
border-radius: 10px; 

/* top-left-and-bottom-right | top-right-and-bottom-left */ 
border-radius: 10px 5%; 

/* top-left | top-right-and-bottom-left | bottom-right */ 
border-radius: 2px 4px 2px; 

/* top-left | top-right | bottom-right | bottom-left */ 
border-radius: 1px 0 3px 4px; 

/* The syntax of the second radius allows one to four values */ 
/* (first radius values)/radius */ 
border-radius: 10px 5%/20px; 

/* (first radius values)/top-left-and-bottom-right | top-right-and-bottom-left */ 
border-radius: 10px 5%/20px 30px; 

/* (first radius values)/top-left | top-right-and-bottom-left | bottom-right */ 
border-radius: 10px 5px 2em/20px 25px 30%; 

/* (first radius values)/top-left | top-right | bottom-right | bottom-left */ 
border-radius: 10px 5%/20px 25em 30px 35em; 

border-radius: inherit; 

Answer 4

你可以試試你的圖像容器下像一個div，

.oval-container { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    height: 50px 
 
} 
 
.oval { 
 
    height: 200px; 
 
    border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -webkit-border-radius: 100%; 
 
    background: #EFEFEF; 
 
    overflow: hidden; 
 
    width: 120%; 
 
    margin-left: -10%; 
 
    border: 5px solid blue; 
 
}

<div class="oval-container"> 
 
    <div class="oval">test</div> 
 
</div>