divの影内部

画像を使わずにdivボックス内に影を表示することはできますか？代わりに私はcssコマンドを使用したいと思います。divの影内部

したがって、次のようなコマンドがあります：-webkit-box-shadow: 1px inset;？

出典

2012-03-12 Tim Dau

彼らは実際には正確には、tumblrのウェブサイトに2枚の画像を、画像を使用しています。ページの中央に1ページ分のシャドー画像と2番目に広いシャドー画像があります。 – Joonas

CSS3 theres box-shadowあなたが必要とするものを正確に行うためにインセットすることもできます。これは、以下のブラウザでサポートされている：

クロム> = 10.0（> = 4.0 -webkitと-prefix）
のFirefox> = 4.0（-moz -prefixと> = 3.5）
IE> = 9.0
オペラ> = 10.5
サファリ> = 5.1（> = 5.0 -webkitと-prefix）

出典

2012-03-12 10:39:57 oezi

-webkit-box-shadow：インセット0 2em 3em -1em green; が解決しました。ありがとう:) –

ようこそ。あなたの問題を解決した答えを、その左側のチェックマークをクリックすることで受け入れるようにしてください。 – oezi

うんコマンドがあります。このように：

-webkit-box-shadow: 0 0 1px 3px #000 inset; 
-moz-box-shadow: 0 0 1px 3px #000 inset; 
box-shadow: 0 0 1px 3px #000 inset;

あなたは影の効果のためにボックスshadow generatorを使用することができます

出典

2012-03-12 10:40:50 sandeep

for cssgenerator、;-) – raffian

StackOverflowのコードの強調表示は、 'inset'はコメントの一部であると思われるようです。＃000 inset ** ** ..... ** – Druzion

http://css3generator.com/こちらから生成することができます。ボックスシャドウジェネレータの使い方の例を示します。

ステップ1：Box Shadow Generator

ステップ2：あなたが追加したいshadowプロパティを調整します。

手順3：「コピーテキスト」ボタンを使用してCSSコードをコピーします。

ステップ4：その後、CSSコードをスタイルシートファイルに挿入することができます。

このようにします。

<html> 
<head> 
    <title>Title</title> 
    <style type="text/css"> 
    #banner{ 

     position: absolute; 
     width: 100%; 
     height: 150px; 
     background-color: #4E6C88; 
     -webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75); 
     -moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75); 
     box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75); 
    } 

    </style> 
</head> 
<body> 
<div id="banner">  

</div> 
</body> 
</html>

は...ありがとう;）

出典

2015-03-19 06:03:26

答えて

関連する問題