私は、私はあなたを助けることができると思います。
まず、動作するいくつかのコードを提供します。次に、動作する理由を説明します。ここに行く：
HTML
<body>
<div class='block'>
<div class='block2'>
Hello World
</div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
body {
background: grey;
}
.block {
color: white;
text-align: center;
font-size: 3em;
margin: auto;
margin-top: 50px;
height: 100px;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,.01), rgba(0,0,0,.2) 20%,
rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.01) 100%);
}
.block2 {
height: 100px;
width: 400px;
margin: auto;
}
[OK]を、私が説明することができます！ :)
あなたのHTMLを最初に見てみましょう。あなたは基本的に "Hello World"テキストを含んでいるので、あなたが持っている背景があれば、そのコンテナの境界に拘束されます。
グラデーションに横の罫線がないようにするには、そのコンテナ（そのdiv）をページの全幅に広げます。あなたはまだそれ自身のコンテナにテキストを保持することができます、そして、あなたがそれに背景色の設定を与えない限り、それは透明になります.... ooooo ...あああ！笑！！！
HTMLでは、元の「ブロック」クラスdivの中にdivを配置していて、それを「ブロック2」と呼んでいることに気付くでしょう。私が作成した "block2" divは、テキストを置く場所です。
ここで、CSSコードについて説明しましょう。
私は3つの変更があり、非常に簡単です。ここで彼らは順序である：
変更1 - コードの非常に最初の行で、私は置く：あなたがで任意の奇妙なスペースを持っていなかったように、ちょうどだった
* {
margin: 0;
padding: 0;
}
は、それを作るためにあなたのモニターの外側の端、または他の誰かのモニターにその問題について話してください。それはコードの非常に便利な小さなスニペットであり、それは "ソフトブラウザのリセット"です。これらの値を何も設定しないことで、レベルを上げることができます。これにより、さまざまなブラウザで作成結果を一貫して見せることができます。 -
変更2は、私はあなたの元のCSSコードに次のコードを追加：
.block {
width: 100%;
}
もちろんで国境を処分したブラウザの幅にそのdiv要素を拡張したことがすべて両側。 400pxという明確な幅ではなく、ブラウザに画面の全幅を表示するように指示しました。
変更3 - 私は "block2"と呼ばれる新しいdivに少しスタイリングを追加しました。ここでは、コードは次のようになります。
.block2 {
height: 100px;
width: 400px;
margin: auto;
}
私はちょうどそれを（div要素の幅が、今は100％であるので、それによって画面）あなたは、もともと、その後、「ブロック」のdivの途中で、それを中心とした同様の測定を行いましたそれにautoのマージンを与えることによって。
私は役立つことを願っています。申し訳ありませんが説明が長かったです！私はちょうど徹底的であることが好きで、私は人々がソリューションがなぜそれと同じように機能するのか理解できるように支援したい
:)
利用可能なCSSの正方形の勾配はまだありませんので、次善のオプションは、あなたのためでしょう、この仕事、最も可能性の高いボックスシャドウのですか？ https://jsfiddle.net/4xLamxxp/3/ – LGSon
@LGSonそうですね。鮮明なエッジを隠し、代わりにそれらを混ぜる方法があっただけの場合。 – user4584963
あなたは影を増やし、要素https://jsfiddle.net/4xLamxxp/4/を減らすことができます。または、影/背景の不透明度でこれを好きにすることができます。https://jsfiddle.net/4xLamxxp/5/ – LGSon