6

filter最近、CSSプロパティを詳しく調べています。いくつかのテストを行うためだけに、いくつかのコードを書き留めました。drop-shadow以下は、フィルターに関連する簡単なコードです。

HTML

<div class="rounded"></div><div class="bubble"></div>

CSS

div.rounded{
    width: 300px;
    height: 100px;
    background:red;
    display: inline-block;
}

div.bubble{
    border: 20px solid transparent;
    border-left: 20px solid red;
    display: inline-block;
    position: relative;
    top:-40px;
    -webkit-filter: drop-shadow(50px 50px 50px 10px blue);
    filter: drop-shadow(50px 50px 10px blue);
}

添付の画像filter:drop-shadow()からわかるように、Firefox (画像の右側) では正常に動作しますが、Chrome (画像の左側) では正常に動作しません。今のところIEには興味がありません。

あなたの意見では、どのような問題が考えられますか?

4

0 に答える 0