css
-
CSS子选择first-child和nth-last-child再次立功，你还没用过？
最近隔壁美工小姐姐又给我找难题了，让实现以下功能，一张图居中，二张图平分，三张以上左浮动排列，据说是实现不了，所以让我切这个活动页面了，之前就总结《子选择器》过这个效果用css如何实现，今天再啰嗦一次
七娃博客 43 次
-
css新滤镜：backdrop-filter，确定不试一下与filter的区别？
还记得毛玻璃效果吗？不知道你是否用filter属性设置过毛玻璃效果，其实实现这个效果的最佳方案应该使用backdrop-filter，因为filter导致模糊四周露白，模糊不均匀，但是backdrop-filter的兼容性较差与filter，随着
七娃博客 72 次
-
微信小程序实现向右横向滚动功能的方法
在上一篇《H5移动端css实现向右横向滚动功能》我们已经介绍过横向滚动的发展史，那么小程序也可以用h5的代码实现横向向右滚动的效果，这个方法就不再啰嗦，能实现，这篇文章说一下第二种微信小程序自带的方法：scr
七娃博客 41 次
-
H5移动端css实现向右横向滚动功能
移动端屏幕很小，为了呈现更多的内容，并占用更小的空间，但是又不能影响正常阅读，就出现了现在潮流的设计手法：十字交互法则，卡片横向无限滚动就是其诞生的排版布局之一，不过十字交互最初是在大屏端（电视UI）
七娃博客 56 次
-
CSS多背景/居中对齐/自适应方案
首先看UI小姐姐给前端的设计稿，大标题两边带了2个小翅膀，针对这样的效果，css如何实现？我来总结一下我常用的办法： 1.flex布局，父盒子套三个子元素，分别是“左翅膀”-标题-“右翅膀”，然后父元素设置：{dis
七娃博客 54 次
-
word-wrap/overflow-wrap 设置或检索当“内容”超过指定容器的边界时是否断行
word-wrap/overflow-wrap 设置或检索当“内容”超过指定容器的边界时是否断行。是由word-wrap演变而来，需要用其向后兼容。 normal：允许内容顶开或溢出指定的容器边界，默认内容不换行。 break-word
七娃博客 119 次
-
word-break 设置或检索对象内文本的“字,词”内换行行为。
word-break 设置或检索对象内文本的“字,词”内换行行为。 normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。 keep-all：与所有非亚洲语言的normal相同。对
七娃博客 123 次
-
white-space 设置或检索对象内 “空格” 的处理方式
white-space：normal | pre | nowrap | pre-wrap | pre-line normal：默认处理方式，过滤空白符，自动换行 pre：不过滤空白 不换行 nowrap：不过滤空白符 触边换行 pre-wrap：过滤空白符 触边换
七娃博客 131 次
-
grid+background-attachment实现网格背景
效果： css: .container { position: absolute; width: 100%; height: 100%; background:#fff; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 30fr
七娃博客 95 次
-
html5利用outline实现双边框效果
outline在元素外绘制线框，和border很像，css公式都一样，但是“轮廓线不会占据空间，也不一定是矩形”，例如下图的红色outline线遮盖了下面box1的部分背景，box和box1是无缝隙的，border和box是在平面上一个层次（类
七娃博客 89 次