-1

ダッシュボードを開発していて、タイルのような効果をデザインしなければならない場所で立ち往生しています。box-shadow および border プロパティを使用してみましたが、効果を再現できませんでした! 以下は、私が望む効果を示すサンプル画像です! この効果を得る方法がわからない場合は、私を導いてください!

ありがとうございました。

サンプルエフェクト

コード ：

.header-tile{

    height: 90px;
    min-width: 60px;
    background-color: rgb(182, 163, 163);
    float: none;
    display: inline-block;
    box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 0.64);
    margin: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.65);

}
4

3 に答える 3

3

これで確認できます。JSFIDDLE

.header-tile{

    height: 90px;
    min-width: 60px;
    background-color: rgb(182, 163, 163);
    float: none;
    display: inline-block;
    box-shadow: inset 1px 1px 1px 1px rgba(255,255,255, .46), inset -1px -1px 1px 1px rgba(0,0,0, .26);
    margin: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.65);

}

これは、あなたの望むことですか？

PS: opacity の値を設定して、タイルに選択した背景色で動作するようにすることができます。

于 2013-08-12T08:50:10.953 に答える
0

より顕著な効果を得るために、影と境界線を少し太くしてみましたか? CSS を使用して、次のフィドルを作成しました。

div {
    height: 150px;
    min-width: 150px;
    margin: auto;
    background-color: rgb(182, 163, 163);
    float: none;
    display: inline-block;
    box-shadow: 0px 0px 4px 4px rgba(170, 170, 170, 0.8);
    margin: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

JSFiddle

色も少し変えました。

于 2013-08-12T08:52:12.940 に答える