关于border线样式

基本:

border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

用背景色渐变也可以实现(W3c)

| linear-gradient() | 创建一个线性渐变的 “图像”(从上到下) |
| radial-gradient() | 用径向渐变创建 “图像”。 (center to edges) |
| repeating-linear-gradient() | 创建重复的线性渐变 “图像”。 |
| repeating-radial-gradient() |

重复线性渐变实现border-bottom线

结构为:repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [,<color-stop>]+ )
1、angle 渐变的角度,0deg到360deg,默认值180deg。
2、side-or-corner 方位,列如 to top , to left top(对角线)。
3、color-stop 由颜色和位置组成。位置可以是固定像素值,也可以是百分比值。多个颜色用逗号隔开。

实例

关于border线样式

.line{
  background: repeating-linear-gradient(to right,#a5a5a5 0,#a5a5a5 2.6%, transparent 0, transparent 3.4%, #a5a5a5 0%,#a5a5a5 4%,transparent 0, transparent 5%);
  height: 2px;
  width: 100%;
  margin: 10px 0;
        }

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
none
暂无评论...