web-dev-qa-db-ja.com

CSS3 Box-Shadow Linear Gradient？

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

csscross-browsercss3linear-gradients
19
Oliver Spryn

残念ながら、これは不可能です。 Photoshopなどで作成した背景画像を持つdivを使用することをお勧めします。

2
jacktheripper

このビデオはLea Verouによる をご覧ください。私がリンクしているセクションでは、背景画像のグラデーションを使用してボックスシャドウのようなものを作成する非常によく似たものについて説明します。良い実例を見つけることができれば、回答を投稿しますが、これから始めるのに良い場所になるはずです。 box shadow curl に:after疑似クラスを使用して影を表示するなど、本当にクールなこともできます。

ボックスの上下にいくつかの簡単な例を示し、テキストに下線を付けます。あなたが望むように見えるようにするためにそれをいじる必要があります（たぶん）。

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>
16
redbmk

パーティーに遅刻しましたが、誰かが役に立つかもしれません！実際には、box-shadowに複数の影を付けて実行できます。

box-shadow: inset 0px 33px 25px 0 #000, 
            inset 0 66px 15px 0px #ccc,
            inset 0 99px 5px 0px #fff;

codepenの例： https://codepen.io/InFecT3D/pen/JQdmeL

サイドノート：少し「ハッキング」なアプローチかもしれませんが、場合によっては役立ちます。

3
Niv'O

：before要素を使用して「シャドウ」を設定してみてください。

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

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

3
ink

2つのdivが必要です。

1：線形グラデーション+ぼかし：

.gr{/* Permalink - use to edit and share this gradient:         http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );  

filter:blur(10px);

height:200px;
}

2：他のコンテンツに対して。

.zz {background:#fff;  position: relative; top:-200px;
height:200px;
}

次に：

<div class='gr'></div>
<div class='zz'>BOX</div>

[〜＃〜] demo [〜＃〜]

2
Ignacio Ramos