透明度框陰影

我正在爲我的網站創建標題。標題背景設置爲水平漸變，背景從左到右變爲透明。透明度框陰影

什麼，我試圖做

我可以爲標題這樣的盒子的影子，因爲它從左至右排列的，影子也變得透明。

是我的嘗試

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);

通過下面的我幾乎可以得到它，但透明的漸變dosenot看起來那麼好。

小提琴

http://jsfiddle.net/p7W7M/

來源

2013-03-21 Avinash

提供小提琴或HTML代碼，以便我們可以測試 – 2013-03-21 11:14:46

@SahilPopli：我添加了一個小提琴。請檢查一下 – Avinash 2013-03-21 11:20:37

你想要什麼影子從左到右現在是從右到左 – 2013-03-21 11:24:24

這可以工作，但不能完全[jugaad]

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

At fiddle

來源

2013-03-21 11:45:24

我發現了一個我的需求小提琴，但無法理解如何在我的代碼中實現它。這裏是鏈接http://jsfiddle.net/afshinprofe/8YsAg/ – Avinash 2013-03-21 11:52:38

他使用.svg格式的圖像 – 2013-03-21 11:53:41

透明度框陰影

回答

相關問題