代码变油画，精细到毛发，让美术设计也惊叹

刚刚我们画的那幅画像不像人的脖子？好的，我们再回到人像画上，Diana 绘制人物的脖子也是类似的过程。

在上面这张图里，我们看到了 Diana 如何逐步改形状，最终得到了油画中人物的脖子。

但是仅仅会画各种几何形状，是无法生成艺术品的，Diana 总结了她在绘图中的 5 个重要 CSS 属性。

1、边界半径（border-radius）

边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数 border-radius，可以设定不同的半径数值。

border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;

2、盒子阴影（box-shadow）

对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到 html 容器的边缘，也会沿着边界半径定义的边缘。

box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;

开发者可以指定模糊半径，以及阴影是向内延伸还是向外延伸。

3、变形（transform）

变形的主要方式有：旋转（rotate）、缩放（scale）和倾斜（skew）

transform: rotate ( -45deg )

transform: scale ( 0.7, 1.3 )

transform: skew ( 25deg, 30deg ) ;

此外还有透视，让物体产生远小近大的视觉效果，或者是仅仅为画出一个梯形。

transform: perspective ( 10px ) rotateY ( 5deg ) ;

4、线性梯度（linear-gradient）和径向梯度（radial-gradient）

线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果

background-image: linear-gradient ( 0deg, blue, transparent 60% ) ,

radial-gradient ( circle at 70% 30%, purple, transparent 40% ) ;

5、层叠（overflow）

层叠是一种将大量杂乱元素填充到一个整齐的包中的方法，可以创建一些有趣的形状。在变形那部分的基础上使用 hidden 参数，可以把边缘遮盖起来。

overflow: hidden;

以上 5 种元素缺一不可，随便少一种都会产生怪异的效果。

△从左至右分别是缺少边界半径、阴影、变形、梯度、层叠的效果（点击查看大图）

不过即使这样，也很有抽象艺术的美感，仿佛在看毕加索的作品。

只适用于 Chrome

不过，由于这是一个纯个人艺术创作，Diana 小姐姐并不关心浏览器适配性。

因此，这些代码在 Chrome 里可以完美展现，但如果用其他浏览器打开，可能就会出现不一样的效果。

（编辑：应用网_阳江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!