如何創建此CSS邊框

Question

嗨，大家好，我正在嘗試創建this（圖片）css邊框，但遇到問題。

我已經創建了邊框，但無法使邊框平滑。 這裏是我的代碼

border-left: 5px solid #036; 
border-right: 5px solid #036; 
border-top: 10px solid #036; 
border-bottom: 5px solid #036; 

Answer 1

小提琴，你可以看到它here。

希望它有幫助。

編輯：

HTML：

<div class="a"> 
    <span class="abs">Title here?</span> 
    <div class="b"> 
     Hello.     
    </div> 
</div>​ 

的CSS：

div.a { 
    border-top: 10px solid #333; 
    border-left: 5px solid #333; 
    border-bottom: 5px solid #333; 
    border-right: 5px solid #333; 
    border-radius: 10px; 
    background-color: #333; 
    width: 200px; 
    height: 400px; 
} 
div.b { 
    border-radius: 5px; 
    background-color: #FFF; 
    width: 180px; 
    height: 350px; 
    padding: 10px; 
} 

.abs { 
    color: #FFF; 
    display: inline-block; 
    font-weight: bold; 
    margin-bottom: 10px; 
} 

Answer 2

您正在尋找border-radius來獲得圓角。嘗試是這樣的：

-webkit-border-radius: 8px 8px 8px 8px; 
-moz-border-radius: 8px 8px 8px 8px; 
border-radius: 8px 8px 8px 8px; 

注意這是CSS3和行不通的舊版本IE

Answer 3

的它與背景圖像進行。

Answer 4

可以使用新的CSS3設施，即邊界半徑和背景圖像梯度形式實現這樣的設置。您可以在因特網上找到有關這些信息的信息，例如background gradient和border radius。

下面就是例子，它不會在所有的瀏覽器，而不是你想要什麼，但應該足以給你的基本思想：

HTML結構看起來是這樣的：

<div id="big_div"> 
    Search for a hotel 
    <div id="small_white_div"> 
    Some other content 
    </div> 
</div> 

和相應的CSS將是：

#big_div {height:450px;width:250px;border-radius: 5px;background-color:red; 
background-image: linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%, 
rgb(33,51,140) 100%); 
background-image: -o-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%, 
rgb(33,51,140) 100%); 
background-image: -moz-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)  
51%, rgb(33,51,140) 100%); 
background-image: -webkit-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 
51%, rgb(33,51,140) 100%); 
background-image: -ms-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%, 
rgb(33,51,140) 100%); 
background-image: -webkit-gradient(
linear, 
left bottom, 
left top, 
color-stop(0.05, rgb(33,51,140)), 
color-stop(0.51, rgb(125,187,209)), 
color-stop(1, rgb(33,51,140)) 
);} 
#small_white_div {height:400px;width:220px;margin:auto;border-radius:5px; 
background-color:white;margin-top:20px;} 

好運。