css 点击收藏,这些css技巧，你肯定不会全知道【建议收藏】

下面是总结的css技巧，建议大家收藏，以后用的时候就不用到处查资料了。当然这些也不是所有的，大家如果有什么好的css有趣样式技巧也可以发出来哦

三角形

最常见的一种形状了。切图，不存在的。

/** 正三角*/.triangle{width:0;height:0;border-style:solid;border-width:0 25px 40px 25px;border-color:transparent transparent rgb(245, 129, 127) transparent;

}​/** 倒三角*/.triangle{width:0;height:0;border-style:solid;border-width:40px 25px 0 25px;border-color:rgb(245, 129, 127) transparent transparent transparent;

}

虚线效果

.dotted-line{border:1px dashed transparent;background:linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);

}

css自带的border-style属性 dotted/ dashed . 效果展示出来太密了，并不符合UI设计

具体的虚线的颜色和间距都可以通过repeating-linear-gradient生成的条纹背景去调整。

文本超出省略号

单行文本

.single-ellipsis{width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

}

多行文本

.multiline-ellipsis{display:-webkit-box;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:4;//需要显示的行数

overflow:hidden;text-overflow:ellipsis;

}

扩展: -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property)，它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

浏览器兼容性：

时间轴

html结构