我正在为我的网站创建标题。标题背景设置为水平渐变,背景从左到右变为透明。透明度框阴影
什么,我试图做
我可以为标题这样的盒子的影子,因为它从左至右排列的,影子也变得透明。
是我的尝试
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看起来那么好。
小提琴
提供小提琴或HTML代码,以便我们可以测试 – 2013-03-21 11:14:46
@SahilPopli:我添加了一个小提琴。请检查一下 – Avinash 2013-03-21 11:20:37
你想要什么影子从左到右现在是从右到左 – 2013-03-21 11:24:24