3

サイトの見出しを作成しています。見出しの背景は、左から右に向かって背景が透明になる水平グラデーションとして設定されます。

私がやろうとしていること

左から右に行くにつれて影も透明になるように、見出しのボックス シャドウを作成できますか。

私が試したこと

width: 500px;
height: 50px;
position: absolute;
color: #535353;
left: 45%;
top: 50%;
margin-left: -150px;
margin-top: -200px;
background: -moz-linear-gradient(left, rgba(179,218,221,0.65) 0%, rgba(249,249,249,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(179,218,221,0.65)), color-stop(100%,rgba(249,249,249,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(179,218,221,0.65) 0%,rgba(249,249,249,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6b3dadd', endColorstr='#00f9f9f9',GradientType=1 );
border-radius: 5px;

    box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.5);

以下を使用すると、ほとんど取得できますが、透明なグラデーションはあまり見栄えがよくありません。

フィドル

http://jsfiddle.net/p7W7M/

4

1 に答える 1

0

これは機能しますが、完全ではありません [jugaad]

 box-shadow:60px 5px 0 #ffffff,60px -5px 0 #ffffff,-4px 0px 5px  #000000;

フィドルで

于 2013-03-21T11:45:24.083 に答える