CSS使用box-shadow和border-radius的妙用

Posted on

使用CSS画出一个圆角矩形很简单,但是要画出一个和圆角接近平行的月牙就是需要一点技巧了。 例如下面这个图片:

“首页”左边的那个白色和圆角平行的弧形就是我们要用CSS设计实现的。

先使用box-shadow制造一个长条:

    box-shadow: 10px 0 0 0 rgba(245,245,245,0.7);

效果如下图:

再使用border-radius使这个长条变成弧形:

    border-radius: 0 0 100px 0;

效果如下图:

最后再嵌套一个DIV截取我们所需要的部分

    overflow: hidden;

这样就达到我们一开始的图片效果了~

示例代码:点我点我

tagged: CSS
comments powered by Disqus