严文彬
ui-check 兼容 IE9+
这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：  这样一个布局如何实现呢？下面介绍几种方法 ## 一、伪元素拼接 假设有这样一个 HTML 结构 ```html Svelte API Svelte API Svelte API Svelte API ``` 首先可以考虑的一种方式就利用两个伪元素拼接  中间的圆角比较容易，左右两边的反向圆角如何实现呢？其实可以想想有哪些可以实现圆形的样式，这里想到了**border-radius** ，可以这样来实现 1. 画一个透明的圆 1. 给圆加上足够大的边框或者投影 1. 裁剪一小部分 1. 完成...
经常在某些文档中或者文章中可以看到这样一个"返回顶部"的功能，具体有两个交互 1. 只有滚动一定距离才会出现，返回到顶部重新隐藏 1. 点击会返回到顶部 比如[ LuLu UI](https://l-ui.com/edge/about.design.html)  又是点击的，又是滚动的，看着好像必须要借助 **JavaScript** 了，其实也可不必，经过我的一番琢磨，仅仅使用一点点 CSS 就能实现这样的交互效果，一起看看吧 ## 一、粘性滚动 这里就需要**一点点想象**了。比如这里滚动到一定距离才出现，是不是有点类似 [CSS sticky](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 的概念？只不过 sticky 的一般作用是滚动到一定距离，然后就固定到某一位置，mdn 解释如下 > 元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest scrolling ancestor）*和 [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) (最近块级祖先...
经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时，正常排列，当超过 9 张时，会提示还剩多少张，如下：  如何使用纯 CSS 实现这一效果呢？一起来看看吧 ## 一、九宫格布局 布局就很简单了，一个很普通的九宫格布局，这里使用 grid ```html ... ``` 这里正方形可以用[aspect-ratio](https://www.zhangxinxu.com/wordpress/2021/02/css-aspect-ratio/)简易实现，对应的 CSS 如下 ```css .list{ position: relative; display: grid; width: 300px; margin:...
最近有同事问我这样一个交互，当文本较多时（超出5行），出现“全文”链接，说明有更多的内容，点了之后跳转新页面，效果图如下  那么，有没有办法在不使用 js 的情况下实现呢？我一看就来了兴致，看着好像和之前这篇文章 [CSS 实现多行文本“展开收起” (juejin.cn)](https://juejin.cn/post/6963904955262435336) 有点类似？不过这次的布局要简单的多，交互琢磨了半天发现也是可以完美实现的，并且是完全不一样的思路，一起来看看吧 ## 一、布局 关于布局这块就没什么好研究的了，正常写就行，也不需要什么浮动，实现如下 ```html CSS的 margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。 全文 ``` 然后加点样式，**-webkit-line-clamp **实现多行截断 ```css .wrap { background: #fff; border-radius: 8px; padding: 15px; box-shadow:...
 其实文章原名叫做 “碰到不支持 flex 的项目怎么办？” 现在差不多已经是 flex 的天下了，简单灵活，但有时还是不可避免的会接触到 IE 浏览器，比如我最近接触的 [阅文作家专区 (qq.com)](https://write.qq.com/)，这个就是需要兼容 IE9， 也自然不能使用 flex 布局了。不能使用 flex 怎么办（~~这个项目怎么这么XX，都 2021 年了还要兼容 IE~~）？那只能回归传统布局方式了，也就是浮动布局。 浮动 float 可以说是 CSS 布局里最为灵活的布局之一了，千万不要小瞧了浮动，有些布局只有浮动才能实现呢。下面将介绍几种常见的布局，一起看看吧 ## 一、文本环绕布局 这类布局应该就是浮动最初的用意了，比如这样的 ...
 今天来看一种十分常见的交互：**提示框（tooltips）**。通常提示框都是纯色的，比如下面这个  这类布局实现还不算复杂，可以用一个圆角矩形和一个小三角拼接形成，设置相同的颜色就可以了  这个并不是本文的重点，有兴趣的可以访问 [css-tips (codepen.io)](https://codepen.io/xboxyan/pen/MLJjWQ) 有时候，为了突出强调产品的特点或者为了跟随设计的潮流，设计会用上渐变背景，比如 [lulu UI](https://l-ui.com/) Edge 版本中的 Tips 组件  如果仍然采用**“拼接”**的方式，不可避免会出现衔接不上的问题，有明显的**“割裂”**感，视觉还原会大打折扣  那么，如何实现这类效果呢？一起来看看吧 ## 一、clip-path 裁剪 [**clip-path**](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 可能是很多人马上就能想到的方式。但是实际操作下来，还是会遇到很多麻烦 1. **clip-path: path** 可以支持任意形状，但是却没法实现自适应宽高 1. **clip-path:...
在 mac 文件管理中有这样一个小细节。 1. 当文件名不超过一行时，完整显示，此时鼠标放上去无任何提示 2. 当文件名超过一行时，出现省略号，此时鼠标放上去提示显示完整文件名  一个很微妙但非常**人性化**的细节（ps.都能完全看见也就不需要提示了😘）。其实这类效果在 web 中，通过简单的 CSS 也能轻易实现的。下面就来看看吧~ # 一、CSS 实现思路 相信大家都知道**title**这个属性，原生的提示就用这个了，可以说从上古世纪就开始支持，下面是[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/title?fileGuid=YcHxPHhHvDtpqvDw)上关于这个属性的介绍 > **title**[全局属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes?fileGuid=YcHxPHhHvDtpqvDw)包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户 用法也非常简单 ```xml 元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 ```  >这里 title 的表现样式还有停留时间与操作系统和浏览器有关，也不可修改 现在问题来了，title...