CSS 小技巧

作者： 火头军人/任轲

在页面构建中，能明显提升页面显示质量的一些小技巧。很多简洁美观的页面表现，可以使用代码即可实现，减少图片的使用。

一、边框内圆角

我们在设计例如按钮等控件的时候，会遇到这样的设计：只有内侧有圆角，而边框或者描边的四个角还是保持直角的形状，用以下代码可以轻松的实现。

这种解决方案需要使用到两个元素，那么如果只使用一个元素，应该怎么实现？

这里需要用到的两个属性：和属性，具体属性参见MDN。

属性有以下5个特性

这里我们将使用第四个属性来填充效果当中的空白。同时利用的特性：描边不跟随边框绘制的特点来实现（因为不清楚这是不是一个bug，所以在将来的版本中可能会改变），具体代码如下。

这种实现方式，对于边框的宽度和圆角的大小有一定的限制效果。仅当边框宽度与圆角半径存在√关系时才可实现.

二、条纹背景

如何使用CSS来实现条纹？

使用属性实现

尝试修改属性，当属性

因为条纹是由属性生成的，因此当然也可以使用属性来改变它的大小

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

然后我们尝试创建一个三色条纹以及垂直条纹

垂直条纹

默认值为，可以设置等

斜条纹

为了达到斜条纹等宽的视觉效果，需要运用到勾股定理来计算宽度。

介绍的升级版 ：

可以试着使用和实现同样的60°斜条纹进行对比

三、平行四边形和梯形

使用属性可以很轻松的创建一个平行四边形

缺点：需要两个元素、修改的话需要修改两个地方。

如何使用一个元素就实现这样的效果。

解决办法：将平行四边形的背景设置在伪元素上，对伪元素进行变形。

梯形的概念比平行四边形更加宽泛，只需要两条边平行即可。梯形常用于标签页，之前常用伪元素方法来实现一个梯形。

缺点：

把两个伪元素都使用了；

需要修改形状时，需要修改的方过多；

不能给梯形加边框、阴影；

不能设置成圆角梯形；

通过构造平行四边形的思想，对矩形进行变形。但是这次不采用平面的变形，而是平面变形，通过视觉差来构造一个梯形。

这里需要用到属性变换特性：

实现一个最简单的梯形所需要的代码只有以下一行：

与变换不同，内部变形是不可逆的，因此与构造平行四边形相似，我们也可以将图形的变形放在伪元素上。

优化

1、修改属性，控制转动轴

2、通过属性而非属性来修正视觉大小，同时兼顾了优雅降级

3、添加圆角、阴影、背景渐变

4、改变得到不同斜边的梯形

缺点

斜边的角度依赖于元素的宽度。因此，当元素的内容长度不等时，想要得到斜度一致的梯形就不容易了。

变换具体实现原理参见 matrix3d

四、阴影

投影首先会想到这个属性，根据以上的介绍，我们可以轻松的做出一个元素的阴影

那么如何针对一张图片实现其对应的阴影？在页面的例如头像显示会遇到这种效果

这里将会使用到CSS3里面的属性

更多属性特性。

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能