CSS-冷门技巧分享

CSS-冷门技巧分享

（一）如何实现一个加号？

之前我在看别人关于css的文章中提到了使用负的 outline-offset 实现了加号，因此研究了一下。
我们一般实现加号的方式，就是直接使用字符：+，是不是非常方便？但是存在一个问题，我们看下面的例子，大家思考一下怎么实现：

请实现一个50像素x50像素的加号+（不用图片）【点击】

是不是我们将font-size属性设置为50px就可以实现呢？

文字大小50px：+

可以看出明显不行，我将这个容器的高度设置为了50像素，但是加号的大小明显更小，而且在不设置line-height属性的情况下，还会不上下居中，并且粗细不可控，如果设置line-height呢：

文字大小50px：+

位置仍然是偏下的。

那如果我们将font-size属性设置更大一些，100像素？

文字大小100px：+

此时的加号，我通过工具测量出的大小是51px，这说明，想用font-size属性实现固定大小的加号，不是最优选，这种方式很难控制实现的加号大小跟位置。

用 outline(轮廓) 和负的 outline-offset(轮廓偏移) 实现一个50像素x50像素的加号+：

一个完美的50像素x50像素加号：

 

实现非常简单，首先确定宽高，设置outline属性为1/2宽高 + 1（加号的粗细），outline-offset为宽高值的负数即可。

上面我们提到，直接用文字时无法控制我们想要的加号粗细、垂直居中效果，但是outline属性也可以轻松解决，增加或减小outline值：

 

此方式实现+号，还可以进行扩展，以往开发中遇到的关闭按钮，以及新增按钮，可以不用切图，直接用样式实现：

1

2

3

在实际使用中，chrome火狐支持比较良好，IOS反而不支持这种做法，使用需要注意

（二）单侧投影

box-shadow，是常用来实现盒子投影的属性，我们通常来做两侧投影&多边投影，但其实，负数值可以实现单侧投影。

2侧

4侧

1侧

box-shadow属性4个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径，单侧投影的原理就是如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量，简单理解就是，前两个数值控制阴影中心，最后一个数值控制阴影大小。

（三）翻转

我们要实现一个元素的 180° 翻转，我们会使用 transform: rotate(180deg)，这里有个小技巧，使用 transform: scale(-1) 可以达到同样的效果。

transform: rotate(180deg)翻转

transform: scale(-1) 翻转

（四）文字倒序

负的 letter-spacing 可以实现一段文字倒序排列，这种技巧实际使用很少。

汉字的顺序不影响阅读

（五）实现等高布局

flexbox 布局是目前实现等高布局最主流的方法，不过 padding + margin 的结合，也可以实现。

这是两个普通非等高布局

左盒子
左盒子
左盒子
左盒子

右盒子

padding + margin 结合实现等高布局，原理其实是使用一个很大的正 padding 和相同的负 margin 相消的方法填充左右两栏

左盒子
左盒子
左盒子
左盒子

右盒子

（六）去除多余边距&border

我们在开发时经常遇到这样的样式处理：每个列表之间设置一定的间距（margin-right），这样是为了多个元素并排展示时，中间留有空隙，此时在父容器定宽的情况下，元素会错位，比如：

 

这就出现了一个问题，右侧跟底部的边距，是不希望展示出来的，这时候我们通常的处理方法是，单行展示：用last-child选择器，多行展示，用:nth-child(3n+0)：

 

 

last-child

 

 

nth-child(3n+0)

 

 

nth-child(3n+0)

上面的选择器解决了右侧边距的问题，但是没有解决底部的问题，其实最简单的技巧就是，增加一层包裹的父节点，并设置其负margin，并设置 overflow: hidden：

1

2

3

4

5

6

参考及扩展：

1-负值之美：负margin在页面布局中的应用

2-使用css outline-offset 属性 实现加号

3-纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

4-第五届CSS大会主题分享之CSS创意与视觉表现

转载于:https://www.cnblogs.com/cindyW/p/11555299.html