css - 如何使用 CSS 模糊 div 的一侧

Question

我想让内部 div 的左侧模糊，我的意思是我不想有这么锋利的边缘。但只有左边，右边没问题。知道怎么做吗？

http://jsfiddle.net/9UaKX/8/

.wrapper {
 position: relative;
 width: 300px;
 height: 400px;
  background-color: #d1d571;
}
.aaa {
 background : -moz-linear-gradient(top,  #d1d571,  #a1a561); /* Firefox 3.6+ */
    background : -webkit-gradient(linear, left top, left bottom, from(#F5F5DC), to(#A9A9A9)); /* Safari & Chrome */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#888888'); /* IE 5.5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee, endColorstr=#888888)"; /* IE 8 */
  position: absolute;
  margin: 40px;
  width: 200px;
  height: 300px;
}

Answer 1

.wrapper {
 position: relative;
 width: 300px;
 height: 400px;
 background-color: #d1d571;
}

.aaa {
 background : -moz-linear-gradient(top,  #d1d571,  #a1a561); /* Firefox 3.6+ */
    background : -webkit-gradient(linear, left top, left bottom, from(#F5F5DC), to(#A9A9A9)); /* Safari & Chrome */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#888888'); /* IE 5.5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee, endColorstr=#888888)"; /* IE 8 */
  position: absolute;
  display:inline-block;
  margin: 40px;
  width: 200px;
  height: 300px;
}

.aaa:before {
    content: " ";
    display:inline-block;
    position:relative;
    top:-3px;
    margin-left:-3px;
    width:3px; 
    height: 306px;
    background-color: #d1d571;
    -webkit-box-shadow: 0px 0px 3px #d1d571;
     -moz-box-shadow: 0px 0px 3px #d1d571;
    box-shadow: 0px 0px 3px #d1d571;
}

http://jsfiddle.net/ucm9E/9/