1

この箱の角を同じhtmlタグで丸くすることは可能ですか？他のタグやborder-radiusプロパティ、JavaScript を使用せずに。しかし、CSS クラスと背景画像を使用できます。ボックスの高さはコンテンツに依存する必要があります<p>grr</p>

Box の幅と高さ<h2>は固定ですが、コンテンツの高さは柔軟にする必要があります。

<h2>Nulla Facilisi</h2>
<p>
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>

代替テキスト

編集: Internet Explorer でサポートされていない css border-radius プロパティを使用せずにこれを達成する最善の方法は何ですか?

4

6 に答える 6

2

H2 に背景を配置できます。これは、高さが 10px で、上隅が上に配置された固定幅です。

次に、p タグに反対側の画像を下に配置します。

何かのようなもの：

<h2 style=background-image: url(''); background-repeat: no-repeat; background-position: 0 0;">Nulla Facilisi</h2>
<p style=background-image: url(''); background-repeat: no-repeat; background-position: 100% 0;">
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>
于 2010-03-22T05:50:37.593 に答える
1

ボックスが設定された幅の場合、上下の画像を使用して効果を作成できます。それ以外の場合は、まだ完全にはサポートされていない（または、IE6 / 7ではまったくサポートされていない）JavaScriptやCSSが必要になります。

于 2010-03-22T13:35:16.750 に答える
1

Rounded Corners Roundupを読み、ニーズに最適なソリューションを選択してください。

于 2010-03-22T13:13:03.037 に答える
1

htc ハックを使用して、IE で境界半径のサポートを取得できることをご存知ですか。

Google コードの border-radius.htc

私自身はまだ使用していませんが、IE6、7、および 8 でサポートされていると思われます。

.rounded {
-webkit-border-radius: 9px;  /* safari-chrome */ 
 -moz-border-radius: 9px;   /* firefox */ 
 border-radius: 9px;  /* opera */ 
 behaviour:url(border-radius.htc); /* IE hack */ 
 }
于 2010-03-22T18:09:09.983 に答える
1

それ以外の場合は、この投稿を試してください: http://dimox.net/cross-browser-border-radius-rounded-corners/ (私のものではありません)

または、角を丸くするための jQuery プラグイン: http://plugins.jquery.com/project/corners

于 2010-03-22T08:05:34.620 に答える
1

空手コーナー

基本的に、コーナーを表すイメージがあり、 と を使用して配置しposition:absolute;ますbackground-position。唯一の欠点は、IE6 用の特別なケースが必要であり (透明な png が好きではないため)、<div>ボックスごとに 4 つの extras を追加する必要があることですが、それは非常にうまく機能し、それほど複雑ではありません。

10x10 の円の画像を使用して、5 ピクセルのコーナーのコードを次に示します。

CSS:

.round{
    position:relative;
}

.round .corner{
    background: url('corners.png') no-repeat;
    position:absolute;
    width:5px;
    height:5px;
    font-size:0%;
}
.round .tl{
    top: 0px;
    left: 0px;
    background-position: 0 0;
}
.round .tr{
    top: 0px;
    right: 0px;
    background-position: -5px 0;
}
.round .bl{
    bottom: 0px;
    left: 0px;
    background-position: 0 -5px;
}
.round .br{
    bottom: 0px;
    right: 0px;
    background-position: -5px -5px;
}

HTML:

<div class="round">
  <p>Content goes here</p>
  <div class="corner tl"></div>
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
</div>
于 2010-03-22T05:52:40.967 に答える