CSS揭秘 (3)- 切角效果、不规则投影

一、直切角效果


示例:

知识点:这里利用渐变背景填充,设置渐变角度,把透明色放在切角处,然后在相同位置设置另一个色标。四个切角需要四层渐变,默认情况下背景会填满整个元素,所以需要 background-size 让它们各自占据元素的四分之一。

二、内凹切角


示例:

三、不规则投影


示例:

知识点:使用滤镜 filter,drop-shadow() 滤镜函数可接受的参数基本上和 box-shadow 一致。
注: 任何非透明的部分都会被打上投影,包括文本。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复