聊聊前端工作中常用CSS知识点,你掌握了吗?

网站建设4年前发布
36 0 0

文字单行溢出:,多行文字溢出:,CSS变量又称CSS自定义属性,通过在css中自定义属性--var与函数var()组成,var()用于引用自定义属性。谈到为何会在CSS中使用变量,以下使用一个示例讲述。,渐变分为线性渐变、径向渐变,这里笔者直接记录的使用方式,也是为了使用的时候更加的直观,这里说下,在使用线性渐变的时候,使用角度以及百分比去控制渐变,会更加的灵活,使用方式:,20230306153742992d1fd83965a4b6afb001fa57d32cad752553663,边框渐变:,border有个border-image的属性,类似background也有个background-image一样,通过为其设置渐变颜色后,实现的渐变,后面的数字4为x方向偏移量,使用方式:,20230306153503b7f65ea998fbd2884b1315c5c4ce7c76023c06340,contain:图片放大至满足背景区域的最小边即止,当背景区域与背景图片的宽高比不一致的情况下,背景区域可能会在长边下有空白覆盖不全。 cover:图片放大至能满足最大边时为止,当背景区域与背景图片的宽高比不一致时,背景图片会在短边下有裁切,显示不全。,百分比:可以设置两个值,示例:,结果依次为下图展示:,contain:,20230306153504e78f231284e5eb5415c976dd1bfd04cbb014ae540,cover:,20230306153504374fdc596e93f1aca7d658f7b20c289c5ea993594,百分比(这里是100%):,20230306153753817de7e59a8dd6d1fd0525796049f332e27c80222,首先来看下示例,20230306153505e2801a09488a06d37405194492e5c30c579a56474,如果想要一个下的三角形,可以让border的上边框可见,其他边框颜色都设置为透明,2023030615350414f12610506dbf20889226a49ca88a6653db4b360,页面头部必须有meta关于viewport的声明,通常在做响应式布局的时候,以及大屏的时候很常用的,从而实现在不同分辨率下,实现不同的展示效果,笔者目前技术栈是vue,在修改elementui的样式真的是苦不堪言,style使用css的预处理器(less, sass, scss)的写法如下,在一个有时候会遇到修改elementui中table的全部样式,下面就来一一对应的去修改下的:,

© 版权声明

相关文章