中空の中心で - どのように私は、CSSの円や正方形を作成するのですか?
-
26-09-2019 - |
質問
それはちょうど基本的には正方形や円形の輪郭であるべき - (。すなわちなど、ボーダーの太さを変更する、私は好きに色を変更する)、私はそれに応じてスタイルができていること。
私は(画像か何かのような)何か他のものの上にその円や四角を適用したいとあなたは、正方形または円の下の画像を見ることができるように、中央部には、くり抜かれなければならない。
それは主であるために、私は希望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>
他のヒント
あなたは形状の多くを作るために特殊文字を使用することができます。例: http://jsfiddle.net/martlark/jWh2N/2/する
<table>
<tr>
<td>hollow square</td>
<td>□</td>
</tr>
<tr>
<td>solid circle</td>
<td>•</td>
</tr>
<tr>
<td>open circle</td>
<td>๐</td>
</tr>
</table>
他にも多くがここで見つけることができます: HTML特殊文字の
私は、単純なCSS(2.1規格)の円のためのみの溶液を知らないが、正方形のために、あなたが簡単に行うことができます:
.squared {
border: 2x 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インデックスを持つdiv要素を作ることができると思います。あなただけの画像や「何か」自体に境界線を入れることができたときに、これを実行する必要があるだろう、なぜ私は理解していません。
誰が唯一のCSS&HTMLと互換性のクロスブラウザで円を作る方法を知っている場合、私はそれについて聞くのが大好きだ!
@Caspar Kleijneボーダー半径は、IE8で以下の作業ではなく、必ず約9ません。
まもなく、この質問を見つけた後、私はCSSのトリックにこれらの例を見つけました:ます。http:// CSS-トリック.COM /例/ 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>
があり、上のリンクの他の多くの形状の例があるが、あなたはブラウザの互換性のためにテストする必要があります。