background-clipが面白い

最近だとBranchでも使われていますが、アイコンが丸くなってるのが大変可愛く、気になって調べてみました。

css

#clip {
    width: 50px;
    height: 50px;
    border: 3px solid #FFF;
    border-radius: 100%;
    box-shadow: 0 0 3px #666;
}
#clip img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    -webkit-background-clip: padding-box;
}

html

<div id="clip">
  <img src="https://si0.twimg.com/profile_images/1140591072/27366_619217309_3444_q.jpg" />
</div>

ちょっといじると、こういうこともできたりして、僕は好きです。