如何使用CSS模糊div的一面 [英] How to blur one side of the div using CSS

问题描述

我想让内侧的左侧模糊，我的意思是我不想有这么锋利的边缘。但只有在左侧，右侧是好的。任何想法如何做到这一点？

I want to have left side of the inner div to be blurred, I mean I don't want to have such sharp edge. But only on the left side, right side is fine. any idea how to do this?

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

推荐答案

.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/

这篇关于如何使用CSS模糊div的一面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！