web-dev-qa-db-ja.com

CSSを使用した画像の内側の境界線？

Cssを使用して、コンテンツdivのすべての画像に白い境界線を追加したいと思います。ヘッダーとフッターのdiv領域の画像は影響を受けません。どうすればこれを達成できますか？下の画像例をご覧ください。 Webページにはさまざまなサイズの画像があります。

画像を参照：

Image with inner border

cssimageborder
33
user2369812

追加の要素や疑似要素を持たずにこれを行うことができます。

http://cssdeck.com/labs/t6nd0h9p

img {
  outline: 1px solid white;
  outline-offset: -4px;
}

IE9＆10はoutline-offsetプロパティをサポートしていませんが、それ以外の場合はサポートが良好です： http://caniuse.com/#search=outline

画像の寸法を知る必要のない代替ソリューション：

http://cssdeck.com/labs/aajakwnl

<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>

div.ie-container {
  display: inline-block;
  position: relative;
}

div.ie-container:before {
  display: block;
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid white;
}

img {
  vertical-align: middle; /* optional */
}
72
cimmanon

これを試すことができます：

HTML：

<div class="image">
  <div class="innerdiv">

  </div>
</div>

Css：

.image
{
  width: 325px;
  height: 239px;
  background:url(http://www.modernvice.com/files/images/backgrounds/_Zoom/black-pony.jpg) 0 0 no-repeat;
  padding: 10px;
}

.innerdiv
{
  border: 1px solid white;
  height:100%;
  width: 100%;
}

jsFiddle

これがあなたの言っていることを願っています:)

1
nkmol

Div IDまたはクラスが何であれ、単純に追加できます

#yourDivIDExample {
...
}

#yourDivIDExample img{
border:1px solid #ffffff;
}

これにより、div自体の画像の周囲に境界線が作成されます。クラスまたはグローバルルールでも同じように機能します。

img {
border:1px solid #ffffff;
}
0
Pogrindis

これをbox-shadow: insetとそれで解決しました IE11以上で動作します 。画像の周囲の角に境界線が必要でしたが、この例では_10px境界線が挿入されています。 :beforeまたは:after要素を持つ親divが必要ですが、非常にうまく処理します。

.image {
    width: 100%;
    height: auto;
}

.image__wrapper {
    position: relative;
}

.image__wrapper:before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  box-shadow: inset 0 0 0 3px red;
}

CodePenデモ

0
Calsal

このようなことができます[〜＃〜] demo [〜＃〜]

HTMl

<div class="imgborder">
   <div class="in-imgborder">

    </div>
</div>

CSS

.imgborder {
    width: 300px;
    height: 300px;
    position: relative;
    background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
    width: 290px;
    height: 290px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 1px solid red;
}
0
Vikas Ghodke