2

大家好，我正在尝试在 div 周围创建这个（图像）css 边框，但是遇到了麻烦。

我已经创建了边框，但无法使边框平滑。这是我的代码

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

4 回答 4

3

Fiddle Up，你可以在这里看到它。

希望它有所帮助。

编辑：

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-29T12:01:50.857 回答
2

您可以使用新的 CSS3 工具实现这样的设置，即背景图像的边框半径和渐变形式。您可以在互联网上找到有关这些内容的信息，例如背景渐变和边框半径。

下面是示例，它不适用于所有浏览器，并且不完全是您想要的，但它应该足以为您提供基本概念：

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-29T12:09:23.543 回答
1

它是用背景图像完成的。

于 2012-04-29T11:58:35.810 回答
0

您正在寻找边界半径来获得圆角。尝试这样的事情：

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

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

于 2012-04-29T11:58:14.533 回答