6

以下に示すように、画像の周りにパディングを使用して複数の境界線を作成したいと考えています。CSS のみでこれを行うことを好みますが、これが可能かどうかはわかりません。

これをグーグルで調べている間、ボックスシャドウを使用してオブジェクトの周りに複数の境界線が直接あるこのような例しか見つかりませんでした.

画像の周りにボーダーとパディングを使用してこれを作成してみました。しかし、パディングもうまくいかず、上記の例のようなボックスシャドウでは、私が望むようなものは得られません.

皆さんはこの問題をどのように処理しますか?それは可能ですか?

編集：申し訳ありませんが、私が現在持っているものを表示するのを忘れてください：コードペンリンク

作りたいのはこれ

4

6 に答える 6

10

簡単！

パディング、ボーダー、いくつかのボックス シャドウでうまくいきます。

img {    
    border-radius: 50%;
    padding: 3px;
    border: 1px solid #ddd;
    box-shadow: 0 0 0 7px #fff, 
                0 0 0 8px #ddd;
}

フィドル

于 2013-10-30T10:05:32.920 に答える
3

マークアップを考案するとき、可能であればインライン画像要素の代わりに bg 画像を使用することを強くお勧めします。理由はいくつかありますが、主な理由は次の 2 つです。

  1. インライン img 要素は、css 疑似クラス :before および :after を使用できません
  2. 境界線の半径を使用する場合、インライン画像はコーナーをマスクするのが難しく、特に複数の境界線がある場合は注意が必要です。

また、このデザインは 1 つの div を使用して完全に作成できることを意味します。これが私がそれを行う方法です：

HTML

<div class="thumbnail"></div>

CSS

.thumbnail {
  height: 50px; width: 50px;
  border-radius: 50px;
  background: url(http://www.tapdog.co/images/welcome/satelite-bg.jpg) no-repeat;
  background-size: cover;
  border: solid 1px #aaa;
  box-shadow: 0 0 0 4px #eee, 0 0 0 5px #aaa;
}

ここで重要な点は、box-shadow を使用して疑似境界線をいくつでも作成できることです。border プロパティを使用して実際の境界線を追加することもできますが、さらに進んで疑似クラスを使用して境界線を追加することもできます。疑似クラスはそれぞれ独自の border および box-shadow プロパティを取ることができます。

ここでのもう 1 つの注目すべき点は、背景サイズ プロパティの使用です。特に、ユーザーが生成した画像、または可変サイズの画像を扱う場合。ブラウザ間の互換性のためにベンダー プレフィックスを追加する必要があります

そして、ここに例のあるコードペンがあります。http://codepen.io/anon/pen/dKxbh

于 2013-10-30T09:59:00.120 に答える
1

これは、このフィドルを参照するのに役立つかもしれません

.round{
    width:150px;
    height:150px;
    border-radius:50%;
    border:10px solid #fff; 
        background-color: #eaeae7;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
}
于 2013-10-30T09:58:51.053 に答える
0

あなたはこのようなことを意味します：

jsフィドル

HTML:

<div class="container">
    <div class="inner"></div>
</div>

CSS:

.container{
    width:100px;
    height:100px;
    padding:10px;
    background:white;
    border:1px solid #555;
    border-radius:50%;
}
.inner{
    width:100%;
    height:100%;
    background:tomato;
    border:1px solid #555;
    border-radius:50%;
    margin-top:-1px;
    margin-left:-1px;
}
于 2013-10-30T09:59:30.963 に答える
0 
<div class="border"> bipin kumar pal</div>


.border {
    border: 5px solid hsl(0, 0%, 40%);
    padding: 5px;
    background: hsl(0, 0%, 20%);
    outline: 5px solid hsl(0, 0%, 60%);
     box-shadow:
        0 0 0 10px hsl(0, 0%, 80%),
        0 0 0 15px hsl(0, 0%, 90%);
    color:#fff;

}
于 2013-10-30T10:02:56.967 に答える
0

リンクはまさに​​これを行う正しい方法だと思います! ボックスシャドウを使用します。

http://jsfiddle.net/chriscoyier/Vm9aM/

box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%);

Lea Verou のボックス シャドウの別の例を次に示します。

http://lea.verou.me/css3-secrets/#multiple-outlines

于 2013-10-30T09:56:02.767 に答える