随笔分类 - CSS

移动端 box-shadow 在transform: rotate 动画锯齿解决方案

摘要：原先考虑使用伪类 ::after + opacity来画阴影，这样最节省性能。然而锯齿还在。解决方案：filter: drop-shadow() 嗯。perfect。阅读全文

posted @ 2018-11-09 15:01 kiera 阅读(605) 评论(0) 推荐(0)

移动端弹出层平滑滚动和fix定位的冲突

摘要：为了弹出层的内容能平滑滚动，给弹出层容器加了 overflow-scrolling: touch; 结果发现在IOS下，弹出层容器下的绝对定位的导航和脚部闪现。无论是fixed还是改成absolute，都无法解决问题。解决办法就是给要滚动的内容加一层div，在这个div上，设定平滑滚动。阅读全文

posted @ 2018-04-09 09:12 kiera 阅读(1158) 评论(0) 推荐(0)

移动端弹出层滚动卡顿解决方案

摘要：IOS: 安卓：安卓的表现仍然不够流畅。但是至少没之前那么卡顿了。。。阅读全文

posted @ 2018-04-01 10:38 kiera 阅读(598) 评论(0) 推荐(0)

line-height 和 font-size的关系

摘要：font-size 对 line-height 的影响阅读全文

posted @ 2017-08-02 09:34 kiera 阅读(1169) 评论(0) 推荐(0)

IE和其他浏览器的表现差异：盒子间的空隙，图片变形，justify-content无效

摘要：实际项目中遇到的兼容问题和解决办法：比如 IE和其他浏览器的表现差异：盒子间的空隙，块元素未定宽导致图片变形，flex-direction为column时高度小于子项目的父容器的justify-content无效的问题等等阅读全文

posted @ 2017-07-14 08:38 kiera 阅读(3337) 评论(0) 推荐(0)

CSS 画多边形

摘要：CSS画出很多个齿轮状相扣的六角形阅读全文

posted @ 2017-07-13 16:20 kiera 阅读(1721) 评论(0) 推荐(0)

随机分散位置的文字排版中，利用align-self等CSS属性分配位置

摘要：估计这篇不会有多少阅读量，毕竟我看到的前端，遇到这种情况就直接切图了... 阅读全文

posted @ 2017-07-12 17:35 kiera 阅读(1485) 评论(0) 推荐(0)

Flex 布局在IE浏览器下的糟糕表现

摘要：Flex 在IE10,11 下的诸多bug及解决方案阅读全文

posted @ 2017-07-10 08:58 kiera 阅读(46289) 评论(2) 推荐(4)

Flex 布局在各家浏览器下的一些bug，尤其是IE

摘要：Flex 布局在各家浏览器下的糟糕表现，尤其是IE 阅读全文

posted @ 2017-07-09 09:26 kiera 阅读(2791) 评论(0) 推荐(0)

CSS 实现背景色渐变和文字颜色渐变

摘要：设计师给的稿件，背景色是渐变的，文字颜色也是渐变的，怎么办，难道直接切图？太不负责了！阅读全文

posted @ 2017-07-08 09:41 kiera 阅读(90948) 评论(0) 推荐(6)

用 border 属性画各种边框

摘要：能用CSS画样式，就不用背景图...先老板之忧而忧... 阅读全文

posted @ 2017-07-07 14:16 kiera 阅读(345) 评论(0) 推荐(0)

专用于table的html标签和css属性

摘要：table表格阅读全文

posted @ 2017-07-04 14:30 kiera 阅读(1654) 评论(0) 推荐(0)

CSS 实现好看的边框

摘要：CSS实现好看的边框阅读全文

posted @ 2017-07-02 11:11 kiera 阅读(5785) 评论(0) 推荐(0)

利用CSS3 transform: rotate(xxdeg)画对角线

摘要：特殊样式的对角线，装饰性对角线阅读全文

posted @ 2017-07-01 09:56 kiera 阅读(4541) 评论(0) 推荐(0)

flex布局（3）: flex，inline-flex，inline-block 区别

摘要：flex，inline-flex，inline-block 区别阅读全文

posted @ 2017-06-29 09:34 kiera 阅读(6026) 评论(0) 推荐(0)

CSS布局排版中，三种水平居中的方式。text-align, margin: auto; justify-content:center

摘要：垂直居中解决了，还有水平居中呢。阅读全文

posted @ 2017-06-28 09:25 kiera 阅读(1033) 评论(0) 推荐(0)

flex布局（2）： flex-basis

摘要：flex-basis 属性阅读全文

posted @ 2017-06-27 12:56 kiera 阅读(2364) 评论(0) 推荐(0)

Flex布局结合border:left/right; 来设置文字中间分割线

摘要：Flex 布局和 border:left/right 。文字分割线自定义样式。阅读全文

posted @ 2017-06-22 09:01 kiera 阅读(4829) 评论(0) 推荐(0)

flex布局（1）：display:flex 布局应用

摘要：美妙的Flex 布局。阅读全文

posted @ 2017-06-21 10:58 kiera 阅读(7492) 评论(0) 推荐(0)