如何創建此CSS邊框

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

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

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

來源

2012-04-29 Raju Kumar

「光滑」是什麼意思？ http://border-radius.com/ – Aprillion 2012-04-29 11:56:55

@deathApril：我認爲他是指漸變。 – 2012-04-29 11:57:25

[CSS3 Gradient Borders]的可能重複（http://stackoverflow.com/questions/2717127/css3-gradient-borders） – 2012-04-29 11:58:32

小提琴，你可以看到它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; 
}

來源

2012-04-29 12:01:50

你應該在這裏發佈你的代碼。如果jsfiddle失敗，你的帖子就沒用了。 – 2012-04-29 12:03:26

@jmein小提琴改進和代碼發佈。 – 2012-04-29 12:07:49

你可能想檢查你的提琴在鉻。似乎有一個問題。 – 2012-04-29 12:09:31

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

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

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

來源

2012-04-29 11:58:14

的它與背景圖像進行。

來源

2012-04-29 11:58:35 Popcorn

但是，如果您只是尋找圓角，請嘗試以下操作：http://css3please.com/ – Popcorn 2012-04-29 11:59:57

你可以通過CSS來做到這一點，而不僅僅是背景圖片。 – 2012-04-29 12:09:12

可以使用新的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;}

好運。

來源

2012-04-29 12:09:23 Atheus

如何創建此CSS邊框

回答

相關問題