画像の内側にある境界線を作成しようとしています。したがって、写真の端から境界線の位置まで10px程度のマージンが必要です。
それがどのように見えるべきかの例：http： //imgur.com/a/lMSMR
あなたはここに写真のあるページを見ることができます：http： //blueboxluxe.com/praise/
とにかく、これのいくつかの部分は行うのが難しいです... 1）レイアウトは流動的です-写真のサイズは変わる可能性があります。2）サイズに関係なく、すべての写真に境界線を表示したい。3）賞賛のページでは、たくさんの山車が起こっています。したがって、物事はそれを正しく処理する必要があります。
ボックスシャドウで遊んでみましたが、画像の外側の境界線だけが表示されます。中にはありません。
アウトラインプロパティを試して、負のオフセットを指定します。
outline:2px solid red;
outline-offset:-15px;
ただし、IEはサポートされていません。
コンテナdivを試すこともできます
<div><img src=""/></div>
divに固定の高さと幅を与え、オーバーフローを非表示にします。
div{height:100px;width:100px;overflow:hidden;border:1px solid black;}
たぶん、画像を含むdiv内にdivを作成し、次のように設定します。
position:absolute;
margin:2% auto;
left:2%;
width:96%;
border:solid 1px #fff;
次に、それを含む要素を指定します。
text-align:center;
または、画像が他の要素を含むはるかに大きなdivに浮かんでいる場合は、画像のサイズに設定された親divに配置してから、画像の下または上に境界線を追加する新しいdivを配置します。境界線として使用するdivに画像を配置しないでください。パーセンテージを使用した理由は、画像のサイズに応じてサイズを変更する必要があるためです。
あなたが数字で遊んでいれば、それはあなたが望むように働くはずです。
css3のbox-shadowプロパティを使用できます。厚さ1pxのボックスシャドウを使用すると、ほとんどすべてのブラウザでその効果が得られます。