发表于： 2016-03-17 01:27:58
1 4862
今天完成的事情：完善了商盟项目中的一个内凹圆样式，采用了渐变和绝对定位两种方法。
明天计划的事情：继续完成这个页面的响应适应部分,开始接触AngularJS
遇到的问题：
1.通过radial-gradient对盒子各部分颜色调节这种渐变的方式来表现出诸如边框内凹圆，指向三角型等特殊形状，它的优点是不需要绝对定位就能实现，针对部分响应式场景非常实用，但是缺点也很明显，因为是通过渐变的效果实现的，所以实际上整个盒子依旧存在，所以如果在这个盒子外加外边框之内的，就会将这种渐变暴露出来，因为边框会覆盖在图形上,代码略臃肿。
链接：https://github.com/YIXUNFE/blog/issues/3
2.采用绝对定位的话，用另一个盒子覆盖在目标盒子上，对另一个盒子进行padding，border-radius等属性的设置，不会出现边框覆盖这种问题，即使出现，也可以通过调节层级来避免，缺点是在响应式中，另一个盒子的位置会发生较大变化，需要通过媒体查询来不断调整。
收获：学会了纯css实现div的边框多种形状的绘制。
返回列表
评论