Question

大家好我想在div周围创建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

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

祝你好运。

Answer 3

完成了背景图片。

Answer 4

您正在寻找border-radius来获得圆角。尝试这样的事情：

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

请注意，这是CSS3，不适用于旧版本的IE

如何创建此CSS边框

4 个答案: