これまでのところ、clipプロパティを使用して置き換えるものは何も見つかりませんでした。私は無駄に負のマージンを歌ってみました。そして今、私の最後の望みはjavascriptです。私はそれをグーグルで検索しましたが、私が探しているものを本当に見つけられませんでした。
私が欲しいのは、写真のエッジをクリップすることです。そのため、ブラーフィルターを画像に適用すると、エッジはブラーされませんが、鮮明になります。はい、svgフィルターを使用しましたが、移行をスムーズにする適切な方法を見つけることができませんでした
<style>
#content{
background:#fff;
}
.one{
width:455px;
height:213px;
overflow:hidden;
display:inline-block;
vertical-align:top;
}
.one img{
position:relative;
top:-30px;
left:-7px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.one img:hover{
filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url(blur.svg#blur);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
</style>
<div id="content">
<span class="one">
<a href="/"><img src="http://0.tqn.com/d/create/1/0/z/I/4/-/forthebirds.jpg" /></a>
</span>
</div>