标签：CSS
共 22 篇文章
Ant Design实现表格行置顶功能
最近遇到客户一个需求，在之前的《Ant Design中实现表格的滚动加载》中基础上，用户滚动表格的时候，需要将特定的行置顶，比如合计这一行。这种在excel上显而易见的操作的方式，基于ant design的Table组件实现起来还有点麻烦，本文记录一下解决问题的过程，以供参考。
CSS解决Safari长按无法保存图片
接手一个老项目的维护，客户报了一个bug，说自己的网站在iPhone里浏览网站的时候长按图片没有反应，尤其在微信里打开网页无法识别二维码，导致用户无法转化。
继续阅读使用CSS实现马赛克的效果
最近需要实现一个动态文字马赛克的效果，记录一下：
.mosaic {
color: transparent;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
效果如图：
使用 box-shadow 代替 border
在前端开发中给一个 div 添加边框，一般是使用border属性。
如下：
<div class="box">
</div>
CSS
.box {
background: blue;
width: 100px;
height: 100px;
border: 3px solid red;
}Bootstrap 4 中 hidden-* 和 visible-* 类都去哪了？
之前使用过一个CMS开发过后台系统，使用了 Bootstrap3，里面有好个非常好用的css类 hidden-* 和 visible-*，可以方便地实现响应式。最近帮朋友改一个基于 Bootstrap 4 开发的系统，却发现找不到这两个好用的类啦。后来仔细看了一下，发现在 Bootstrap 4 中，这2个类前缀已经被移除了。
text-overflow: ellipsis 无效的解决方案
一个简单的需求，要展示用户的微信名，有的人喜欢把微信名起的很长，导致一个框框显示不下，于是用到了 text-overflow 的属性。代码如下：
width: 90%;
margin: 0 auto;
overflow: hidden;
font-size: 14px;
color: #fff;
text-align: center;
text-overflow: ellipsis;CSS 中 margin 与 padding 的百分比
最近做开发的时候用到了多次 margin: xx% 来做自适应的网页布局，但这个东西有时候出来的结果并不是自己所想的，于是去百度了一下这个百分比的计算基准，结果发现了一个比较好玩的点。
示例HTML
<div class="boxer">
<div class="box"></div>
</div>不定宽高元素的水平垂直居中
前端开发中水平垂直居中是绕不开的坎，尤其是宽高不定的元素，之前听说过总总办法，由于自己懒，也没一一去试，今天就做一个总结。
PS：纯CSS实现，布局的问题不应试交给JavaScript(除非某些破不得已的情况)。
预期结果
使用 Less 替换 wxss 开发微信小程序
微信小程序开发中默认使用的 wxss 做为样式文件，这货对应成前端就是 CSS 文件，所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器（参考：wxapp.vim——使用Vim开发小程序利器），于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。