CSS应用篇 | border边框竟然可以这么用

在我们平时网页中，想必大家一定用过border，可以根据border给我们提供的各种属性实现盒子的边框效果，那么今天就给大家分享一下边框的应用。

01

常规姿势

在CSS1中就定义了边框样式属性：border设置全部或指定具体边框样式。具体包括指定样式：宽度：width、样式：style（none、solid、dotted、dashed等）、颜色：color。可以通过border统一设置边框样式，也可以通过border-left:width style color独立设置边框样式。这部分相对比较简单，下面我们来使用div示例及样式展示一下基本设置方法：

02

特殊姿势

我们都知道，标准盒子模型的大小会受content（width,height）、padding、border的影响，所以，即使一个盒子未设置内容大小，只要有边框或内边距，盒子也是会有大小的。我们就从这里出发，假若盒子未设置宽度和高度，我们给盒子增加了边框大小为10px,给每边边框设置不同的颜色来看一下：

假使只有上边框有颜色，其他边框的颜色均为透明：

此时我们就会得到一个三角小图标，是不是感觉很神奇。

再比如，我们给盒子设置width，再来观察下，你就会发现你得到了一个梯形。

03

借助其他样式合并输出姿势

border边框还能与border-radius一起来做出我们希望效果。例如：

再做一个月亮给你呀：

再送你一朵小花花：

最后做一个火热的爱心送给你呀~~

。