それは基本的に正方形または円の輪郭である必要があります-それに応じてスタイルを設定できます(つまり、色を好きなように変更したり、境界線の太さを変更したりなど)
その円または正方形を他のもの (画像など) の上に適用したいのですが、中央部分をくり抜いて、正方形または円の下の画像が見えるようにする必要があります。
主にCSS + HTMLであることが望ましいです。
それは基本的に正方形または円の輪郭である必要があります-それに応じてスタイルを設定できます(つまり、色を好きなように変更したり、境界線の太さを変更したりなど)
その円または正方形を他のもの (画像など) の上に適用したいのですが、中央部分をくり抜いて、正方形または円の下の画像が見えるようにする必要があります。
主にCSS + HTMLであることが望ましいです。
これを試して
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>
単純なcss(2.1標準)のみの解決策はわかりませんが、正方形の場合は簡単に実行できます。
.squared {
border: 2px solid black;
}
次に、次のhtmlコードを使用します。
<img src="…" alt="an image " class="squared" />
div の幅/高さを (たとえば js を使用して) 変更しても円形を維持したい場合は、半径を 50% に設定します。例: css:
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
html:
<div class="circle"></div>
サークルタイム!:) 中空の中心を持つ円を作成する簡単な方法: 境界線半径を使用し、要素に境界線を与え、背景がないので、それを通して見ることができます:
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>
私の知る限り、CSS と HTML のみで円を作成するクロスブラウザ対応の方法はありません。
正方形の場合、境界線と z-index を上に置くよりも高い div を作成できると思います。画像または「何か」自体に境界線を付けることができるのに、なぜこれを行う必要があるのか わかりません。
CSS と HTML のみでクロス ブラウザ互換のサークルを作成する方法を知っている人がいたら、ぜひ教えてください。
@Caspar Kleijne border-radius は IE8 以下では機能しません。9 については不明です。
この質問を見つけた直後に、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>
上記のリンクには他にも多くの形状の例がありますが、ブラウザーの互換性をテストする必要があります。