CSS是一门神奇的语言,用的好可以让页面看起来更优雅,用的不好不仅会给自己带来工作量,也可能会影响页面的美感。想要把CSS学完,并且牢牢记住,这个还真有点难度。一般常用的
CSS是一门神奇的语言,用的好可以让页面看起来更优雅,用的不好不仅会给自己带来工作量,也可能会影响页面的美感。想要把CSS学完,并且牢牢记住,这个还真有点难度。一般常用的我们会写,因为用的多了,如果是遇到不常用的属性,估计只能靠“百度”了。本文总结了笔者在实际项目中遇到的CSS问题,感觉有点意思,就记录下来。 使用css 实现三角形、多边形等不规则形状如果是单纯实现一个三角形,特别是等腰三角形,我们可以采用border的方式来实现:
运行结果: 如果我们要实现多边形,我们可以考虑使用裁剪的方式,裁剪出多边形的形状。 clip-path:使用裁剪的方式用于创建元素的可显示区域。裁剪后,区域内的部分为显示,区域外的部分则隐藏。clip-path可选的值有很多,例如:
polygon有两种参数需要传入,一种是可选的填充规则,省略不传则为默认值,通常来说不传;另一种是三对或者更多的坐标值,坐标值按照笛卡尔坐标系,顺序为“上右下左”,分别指定每个点的坐标,坐标采用距离原点的百分比或者具体的px。
运行结果:
运行结果: flex布局下实现文本省略号展示效果单个元素如果是flex布局无法实现省略号的效果,因此至少需要两层。父元素设置为flex布局,子元素设置省略号展示。
运行结果: 实现自定义dash虚线分割线采用背景图片渐变的方式: 运行结果: 使用重复性渐变实现分割线repeating-linear-gradient
|
2021-04-14
2021-04-29
2018-01-07
2022-06-10
2021-09-30