2

こんにちは、この(画像) css ボーダーを div の周りに作成しようとしていますが、問題があります。

境界線を作成しましたが、境界線を滑らかにすることができません。ここに私のコードがあります

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 の新しい機能、つまり、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-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 に答える