5

「カード」要素に、ページから持ち上げられたように見えるドロップシャドウを付けようとしています。:: after疑似要素、css-transform、およびボックスシャドウを使用してこれを実行しています。

Mac OSX、Chrome（最新バージョン）、Firefox5を使用しています。結果は次のとおりです。

ブラウザレンダリングの比較

ご覧のとおり、Firefoxのレンダリングには奇妙な境界線のようなアーティファクトがあります。これの色は、2番目のFirefoxの例でわかるように、ボディの背景色にリンクしているようです。

これを行うために、私は次のコードを持っています：

HTML：

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
</div>

CSS：

.card{
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  height: 375px;
  margin-bottom: 20px;
}

.card_container::after{
  content: "";
  width: 210px;
  height: 10px;
  -webkit-transform: rotate(2deg); 
  -moz-transform:    rotate(2deg);
  box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  position:absolute;
  bottom: 20px;
  right: 8px;
  z-index: -1;
}

CSSはもう少しありますが、他のことを除外するのに十分な遊びをしたと確信しています。

プラットフォーム/ブラウザ固有の場合、および/または修正がある場合、これが発生している理由はありますか？助けてくれてありがとう！

4

1 に答える 1

1

:afterトリッキーなセレクターです。ドキュメントにHTML要素を追加しますが、その位置を自由に操作することはできません。次のようにHTMLを変更することをお勧めします。

<div class="card_container">
  <div class="card">
    <!-- Content //-->
  </div>
  <div class="shadow"></div>
</div>

使用中のすべてのカード要素に「シャドウ」divを追加する必要があります。これには時間がかかる場合があります。

今CSSのために：

.card {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #aaa;
  margin-bottom: 20px;
  height:100px; /* just for show, can be set to auto */
}

.card_container {
  width:210px;
  overflow-x:hidden; /* preventing the shadow from leaking out on the sides */
}

.shadow {
  width: 93%;
  height: 10px;
  /* rotation */
  transform:rotate(2deg);
  -moz-transform:rotate(2deg); /* Firefox */
  -webkit-transform:rotate(2deg); /* Safari and Chrome */
  /* shadow */
  box-shadow: 3px 3px 3px #4a4a4a;
  -moz-box-shadow: 3px 3px 3px #4a4a4a;
  -webkit-box-shadow: 3px 3px 3px #4a4a4a;
  background-color: #4a4a4a;
  border: 1px solid #4a4a4a;
  position: relative;
  bottom: 33px;
  left: 5px;
  z-index: -1;
}

このソリューションはあまり柔軟ではありません。カードの幅を変更する場合は、シャドウ要素を調整する必要があります（たとえば、シャドウが広いほど、回転が少なくなります）。

于 2011-08-26T16:00:53.450 に答える