CSS3ボックスシャドーリニアグラデーション？

Question

CSS3では、クロスブラウザ（Mozilla、Webkit、Opera）のインセットボックスのシャドウを作成する方法はありますか？私が見つけたもっとも近い方法は、影の外側が1つの色になり、このページの内側の別の色に変わることだけです。http://www.css3.info/preview/box-shadow/

Answer 1

残念ながら、これは不可能です。私はちょうどあなたがPhotoshopまたは同様に作成する背景画像でdivを使用することをお勧めします。

Answer 2

this video by Lea Verouをご覧ください。私がリンクしているセクションでは、バックグラウンドイメージのグラデーションを使ってボックスシャドウのようなものを作る、非常によく似たことについて話しています。私が良い実例を見つけ出すことができたら、私は答えを投稿しますが、これはあなたに良い出発点を与えるはずです。 box shadow curlと:afterの疑似クラスを使用して、シャドーを表示するような、本当にクールなものをいくつか実行することもできます。

ここでは、ボックスの上部と下部にいくつかのテキストを下線で示した簡単な例をいくつか示します。どのように見えるようにするためにそれを（多分、多分）周りに遊ばなければならないでしょうが、CSSには本当にすばらしい機能がいくつかあります。

body { 
 
    display: flex; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    
 
    background: 
 
    radial-gradient(at 50% 0, black, transparent 70%), 
 
    linear-gradient(0deg, black, transparent 50%) bottom; 
 
    background-size: 100% 15px; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.underline { 
 
    width: 6em; 
 
    text-align:center; 
 
    font-size:30px; 
 
} 
 

 
.underline:after { 
 
    content: '\00a0'; 
 
    background-image: 
 
     radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%); 
 
    background-size: 100% 2px; 
 
    background-repeat: no-repeat; 
 
    float:left; 
 
    width:100%; 
 
}

<div class="container"> 
 
    <div class="underline">Hello, world!</div> 
 
</div>

Answer 3

使用してみてください：要素の前に '影' セットアップを設定します。

.classname { 
    &:before { 
     content: ''; 
     position: absolute; 
     display: none; 
     top: -20px; 
     left: -20px; 
     right: -20px; 
     bottom: -20px; 
     z-index: -1; 
     background: linear-gradient(to bottom, red, blue); 


    } 

    &:hover { 
     &:before { 
     display: inline-block; 
     } 
    } 
    } 

このコードは、このようなホバー効果を設定する方法の例です。