49

それは基本的に正方形または円の輪郭である必要があります-それに応じてスタイルを設定できます(つまり、色を好きなように変更したり、境界線の太さを変更したりなど)

その円または正方形を他のもの (画像など) の上に適用したいのですが、中央部分をくり抜いて、正方形または円の下の画像が見えるようにする必要があります。

主にCSS + HTMLであることが望ましいです。

4

8 に答える 8

60

これを試して

div.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

div.square {
  border: solid 21px #f0f;
  width: 50px;
  height: 50px;
}
<div class="circle">
  <img/>
</div>
 <hr/>
<div class="square">
  <img/>
</div>

詳細はこちら

于 2010-09-28T18:12:23.333 に答える
8

単純なcss(2.1標準)のみの解決策はわかりませんが、正方形の場合は簡単に実行できます。

.squared {
    border: 2px solid black;
}

次に、次のhtmlコードを使用します。

<img src="…&quot; alt="an image " class="squared" />
于 2010-09-28T18:11:00.510 に答える
7

div の幅/高さを (たとえば js を使用して) 変更しても円形を維持したい場合は、半径を 50% に設定します。例: css:

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

html:

<div class="circle"></div>
于 2011-11-26T10:15:58.857 に答える
7

サークルタイム!:) 中空の中心を持つ円を作成する簡単な方法: 境界線半径を使用し、要素に境界線を与え、背景がないので、それを通して見ることができます:

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    border-radius: 100%;
    width:100px;
    border:solid black 2px;
}

body{
    background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
<div></div>

于 2013-08-08T14:04:02.120 に答える
3

私の知る限り、CSS と HTML のみで円を作成するクロスブラウザ対応の方法はありません。

正方形の場合、境界線と z-index を上に置くよりも高い div を作成できると思います。画像または「何か」自体に境界線を付けることができるのに、なぜこれを行う必要があるのか​​ わかりません。

CSS と HTML のみでクロス ブラウザ互換のサークルを作成する方法を知っている人がいたら、ぜひ教えてください。

@Caspar Kleijne border-radius は IE8 以下では機能しません。9 については不明です。

于 2010-09-28T18:15:17.807 に答える
0

この質問を見つけた直後に、CSS トリックでこれらの例を見つけました: http://css-tricks.com/examples/ShapesOfCSS/

コピーされたので、クリックする必要はありません

.square {
  width: 100px;
  height: 100px;
  background: red;
}
.circle {
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
<div class="square"></div>
<div class="circle"></div>

上記のリンクには他にも多くの形状の例がありますが、ブラウザーの互換性をテストする必要があります。

于 2014-07-09T12:51:18.693 に答える