大神带你看太极

ITSTAR

长时间以来,圆角都是开发者最期盼的效果,很多网页设计的老手都投入几十甚至上百个小时,就是为了通过图片来实现可以可以缩放,同时由兼容各种游览器的圆角效果,现在并不用考虑那么多兼容问题也就ie8及ie8以前和opera mini不支持.况且圆角也只是锦上添花的效果,并没有对可用性构成实际影响,所以大家使用标准属性即可

1

网页的排版,布局内容设置都是矩形,我们圆角只是隐藏了四周的角而已.不具有继承性.矩形是作为网页布局一个核心的元素,以前手机塞班系统logo按钮都是矩形然后到ios很多圆角矩形的，最后是安卓很多各式自定义新主题

我们知道圆角样式是依据边框来进行形成的，我们的圆角样式其实就是在一个有宽高的盒子中，对它的四周，也就是四个角进行书写border-radius：px px px px;这四个值分别为左上，右上，右下，左下

2

现在呢，我们来好好地分析，并且进行一下布局，我们来回顾一下，我们今天的主题叫做不同角度看太极，正常的我们看到这张太极图的时候，一般第一反应想到的分局分层是：

3

最外层的是背景，然后中间的太极阴阳鱼是我们要写的整体，也就是设置类名为all，然后里面的大圆，是我们今天的主角，所以我们类名叫做content，这块的布局代码如下

然后面对里面的“黑白阴阳鱼”，可能很多同学会利用我们圆角样式，设置两个div盒子，将他们变为两个半圆，通过margin移动他们的位置，从而拼凑成如下样子

4

但是这样的话，是不是看上去太繁琐了呢？我们如果这样进行设置，是不是布局就会变为这样：

（。。。代表后面的布局）

这样的话会导致我们更加繁杂的布局，因为你还有后面的中圆，小圆。

所以老师这里推荐你们使用如下方式，轻松搞定：那就是我们的渐变色：

我们通过一个渐变色，在原本盒子中，形成一个方向为左边到右边，颜色为白色到黑色的这么一个渐变效果，是不是就使得我们的代码变得更加简洁了啊，整体代码，以及效果如下：

5

之后是不是就要写出在这个大圆的上面，以及下面，进行一个上下圆以圆心为中点，横向对称轴为切线的两个中圆了呀，我们来看看效果：

为了让大家能够看的清除，老师这里用了记号笔，将圆画出来了，不然看不到红色线所勾勒的区域，那么我们应该怎么去实现呢，我们在这里呢，在内容部分，也就是我们的类名为content的盒子当中，设置两个小盒子，aa，bb就行了

ED

6

剩下的我们跟上面的思路一样，但是呢我们可以不需要在aa，bb当中再设置盒子，直接布局如上图就能进行实现了，那么是怎么实现的呢？

我们知道我们的边框依据的是什么？是不是盒子，盒子才有边框，边框是依附盒子进行生存的，那么我们是不是直接将aa，bb设置为小圆，设置他们的宽高，并且设置盒子背景颜色为白，另外一个为黑，同时设置边框为圆角就行，但是，肯定就有同学疑问了，那中间两个中等大小的圆呢，我们直接设置一个很大的边框，假如说为200px，实线solid，边框颜色为黑，另外一个同样与此，只是将颜色改为白，就会是下面的效果啦

但是这样，是不是把我们的主体内容的圆，全部被覆盖了啊，所以我们需要调整边框大小，使得成为我们主体大圆的半径，经过调整，90px最为合适，如下图：

最终进行微调，因为我们不能“厚此薄彼”，对吧，阴阳鱼，一个平衡，不能被打破。所以呢，我们要给aa，bb两个阴阳鱼头，进行margin：0 auto 这么一个效果，是的他们之间不会有间隔。效果如下

所以，最终我们完整的优化代码就是：

是不是简洁而又不啰嗦，还能让我们不再依靠繁杂的挪动距离，进行对齐；不再需要大段大段的代码量，来实现我们的效果

总结：我们的圆角以及我们的渐变样式，是具有十分重要的意义的，例如代码代替原生的图片素材，使得网页体量更小，用户下载更快。并且使得网页的观感更加。