匿名質問者

1396325119 TwitterBootstrap3で丸加工した画像の周りに影をつける方法を教えてください。

画像は例です。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/04/08 13:10:05

回答1件)

匿名回答1号 No.1

添付されたような丸く作った画像に影を付けるということでしょうか?
まず、画像は丸く作ろうが透過処理しようが、Webに貼り付ける時は四角のオブジェとして認識されるのはご存知ですよね?

ドロップシャドウなどはCSS単体で出来るのでそれ単品のクラスはBootstrapに存在しません。
CSSで角丸にしてbox-shadowをかければCSSだけで円状のドロップシャドウを再現することはできます。

border-radius: 100px; /*画像の直径*/
box-shadow: 0 5px 5px rgba(0,0,0,0.2);

あとはabsoluteで浮かせて配置すれば添付画像のようなレイアウトもCSSだけで可能です。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません