CSSの枠線の概要

私はCSSで新しくなっていますが、私がやろうとしていることは、少なくとも私にとってはやや複雑です。私は、内側から透明に、外側から黒く、円で覆いたい写真があります。これは私がこれまでに成し遂げてきたものである：CSSの枠線の概要

.roundedBorder { 
 
    border: 1px solid #1EC865; 
 
    border-width: 4px; 
 
    border-radius: 81px; 
 
} 
 
.img { position:absolute; top:6px; left:6px; width:81px; 
 
}

<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> 
 
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> 
 
</div>

https://jsfiddle.net/dmL56kek/

は、今私は、ソリッドカラーの円の外側をカバーするために探しています。

PS：私の場合は動作しないため、画像にスタイルを適用したくありません。

出典

2016-08-09 malek yahyaoui

なぜだけではなく、あなたのイメージ 'ボーダー半径与える：100％'？ – AliIshaq

https://jsfiddle.net/CRafT/dmL56kek/1/ –

私はそれが複雑だと言うので、私はクロッパーを使用していて、画像であるプラグイン、プレビュー画像を使用して切り取った領域をプレビューしようとしています実際にはこのようなプラグインによって生成されますこの

–

少し変更するとCSSが助けになります。width:78pxを使って、外側のdivの幅は70pxで、境界線は左右から4pxです。

.roundedBorder { 
 
    border: 1px solid #1EC865; 
 
    border-width: 4px; 
 
    border-radius: 81px; 
 
} 
 
.img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;}

<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg"> 
 
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder"> 
 
</div>

出典

2016-08-09 08:13:52

答えて

関連する問題