-1

css 3を使用してdivを作成しましたが、円を配置していますが、オブジェクトを配置すると、divがまだ存在し、長方形であるため、円から外れます。

divの代わりに何かを使用して円を作ることはできますか.私の目的は、オブジェクトを配置するときに円が必要であることです。

ありがとう

4

4 に答える 4

3

要素を円形にする実際の方法はありません。よく知られている「トリック」を使用して、円形に見せることができます。border-radius

のテキスト/コンテンツがdiv円の境界内にのみあるという効果を作成するには、 を使用して、円に含まれる最大の正方形内に塗りつぶすことができますpadding。視覚的な図を次に示します。

円の中で最大の正方形

ここにデモがあります: little link .

HTML:

<div>
   Glee is awesome! Glee!
</div>

CSS:

div {
    border: 1px solid black;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    padding: 15px;
    height: 70px;
    width: 70px;
    overflow: hidden;
}

編集：画像の場合、次の2つのケースがあります：

  • divの背景を円形にしたい。この場合、background-clip: padding-box;プロパティを使用します (これが機能するには、ベンダーがプレフィックスされたバージョンが必要です)。ここにデモがあります: little link .

  • img内部にタグがあります--div前の方法を使用できます。

于 2012-09-28T07:59:26.980 に答える
0

divを作成し、border-radiusを指定します

   width: 230px;
   height: 230px;
   border-radius: 165px;
   -webkit-border-radius: 165px;
   -moz-border-radius: 165px;
于 2012-09-28T07:59:17.493 に答える
0

境界半径がその辺に等しい div を作成すると、探しているものが得られるはずです。

CSS3 互換ブラウザ用の円形 div の作成

于 2012-09-28T07:54:14.453 に答える
0

HTML5 には canvas という要素があります。JavaScriptを使用して描画するために使用できるため、アニメーションにも使用できます。描きたいだけなら、これが役立つかもしれません。それ以外の場合は、css の z-index プロパティを使用できます

于 2012-09-28T07:56:11.900 に答える