本文介绍了如何使用CSS模糊div的一面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想让内侧的左侧模糊,我的意思是我不想有这么锋利的边缘。但只有在左侧,右侧是好的。任何想法如何做到这一点?
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?
.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;
}
这篇关于如何使用CSS模糊div的一面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!