web-dev-qa-db-ja.com

div内の影

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

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

cssshadow
12
Tim Daubenschütz

cSS3には box-shadow 必要なことを正確に実行するために、挿入することもできます。これは、次のブラウザでサポートされています。

  • chrome> = 10.0（> = 4.0 with -webkit-プレフィックス）
  • firefox> = 4.0（> = 3.5 with -moz-プレフィックス）
  • IE> = 9.0
  • オペラ> = 10.5
  • サファリ> = 5.1（> = 5.0 with -webkit-プレフィックス）
17
oezi

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

-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;

ここから生成できます http://css3generator.com/

24
sandeep

Box シャドウジェネレータ をシャドウ効果に使用できます。ボックスシャドウジェネレータの使用方法を示す例を示します。

ステップ1：移動： ボックスシャドウジェネレーター

手順2：追加するシャドウプロパティを調整します。

ステップ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>

ありがとうございました... ;）

0
Arunraj S