html - htmlcssのcrcularpngにアウトラインを追加します

Question

やあみんなこの円形のpngの周りに4pxの白い円形の境界線を追加したいと思います。

後でホバー効果が欲しいので、写真自体ではこれを行うことができませんでした。助けてください！ありがとう。

score 5 · Accepted Answer

HTML：

<img src="http://oi45.tinypic.com/n6uo8o.jpg" alt="" />

CSS：

img {
width:180px;
height:180px;        
border:2px solid red;
border-radius:90px;   
}

このCSSには、「顔」と境界線の間に空白がありません。

img {
width:180px;
height:180px;        
border:5px solid red;
border-radius:90px;
background:red;
}

score 2 · Accepted Answer

次のように、CSSを使用して円形要素を作成できます。

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  border:1px solid #000;
}

幅と高さは異なる場合がありますが、使用するには互いに等しくするborder-radius:50%;必要があります。そうでない場合は、必要に応じてプロパティを変更する必要がありborder-radiusます[OPによる回答のように]。

これが動作中のJSFiddleです

また、CSSサークルの詳細については、このリンクをクリックしてください

score 2 · Accepted Answer

問題のオブジェクトにプロパティを適用しborder-radiusます。

プロパティ構文：

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

例：

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

border-radiusプロパティの詳細については、こちらをご覧ください。

3 に答える 3