首页 前端知识 前端实用的20个css技巧

前端实用的20个css技巧

2024-06-08 09:06:40 前端知识 前端哥 590 904 我要收藏

借问工资何时涨?好个曲终人散事渺茫。
本文在某金也有发文,推荐在某金观看,方便在线预览效果某金

1. 首字母大写(或其他样式处理)

::first-letter 伪类选择器用来指定元素第一个字母的样式。

jcode

2. 透明图片阴影

相信你一定用过box-shadow属性给盒子设置阴影吧,但是当你想要给透明图片添加阴影的时候,却看起来像加了个边框!这时候神奇的drop-shadow就派上用场了。

drop-shadow 的工作方式是,其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状,而不是显示在图片外面。
jcode

3.镂空文字

因为text-stroke不是标准属性, 大多数情况要加上前缀

-webkit-text-stroke: 1px #1e80ff;

jcode

4.背景文字

利用background-clip: text;规定背景的绘制区域,再把文字颜色设置为透明实现。
jcode

5.填充文字效果

(如下鼠标悬浮体验效果)
jcode

6.网页灰度效果

grayscale(amount)函数将改变输入图像灰度。amount 的值定义了灰度转换的比例。值为 100% 则完全转为灰度图像,值为 0% 图像无变化。若未设置值,默认值是 0。(如下鼠标悬浮体验效果)
jcode

7. flex布局最后一行左对齐

你在使用flex布局的时候有遇到过这种情况吗?

  1. 每行固定元素个数
  2. 每行元素都是space-between的效果(两端对齐,项目之间的间隔相等,即剩余空间等分成间隙)
  3. 最后一行元素需要靠左对齐

这时候我们可以采用以下3种方法:

方法1: 使用js补齐元素,例如,每行展示3个元素,现在一共有5个元素,那么我们就可以在最后补一个同宽度的透明元素。

方法2: justify-content设置为space-between实现两端对齐效果,最后一行再特殊处理:思路为选中最后一个元素,设置其右边距,挤到只能容纳最后一行元素的宽度。
jcode

方法3: justify-content设置为flex-start,先将全部元素左对齐,然后计算出每个元素的间距,通过gap设置元素间距(如果行列间距不同,可以用column-gap设置列间距,row-gap设置行间距),伪装实现两端对齐的效果。

**注意:**由于gap兼容性的问题,我们可以利用相同的思路,用maigin-right,margin-bottom代替gap设置元素间距,但是需要调整整体的位置,这里就不举例了。
jcode

8.毛玻璃背景效果

使用backdrop-filterfilter都可以写出高斯模糊的效果,但是两者使用起来还是有区别的,而且使用的目标也不同。

区别:

backdrop-filter:使背景模糊,不会影响到背景下面的图片

filter:通常是定义 img的可视效果,修改图片的模糊效果,值越大越模糊

我们这里实现毛玻璃效果就是使用了backdrop-filter属性。
jcode

9. 画三角形

css画三角形一般用border来做。
jcode

10. inline元素间的空白间隙

想必你也遇到过这种情况:行内元素排列的时候,明明没有边框,也没有间距,但就是有空隙。

其实间隙是由换行或者回车导致的,你可以将标签代码都写同一行即可解决。但是这样有点呆,我们可以通过设置父元素的font-size为0将空隙缩小到0。(如下鼠标悬浮体验效果)
jcode

11. 文字溢出省略

文字超出后显示省略号也是经常会用的样式。

单行文本溢出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
复制代码

多行文本溢出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

12. 列表除了最后一个元素都统一样式

一般这种情况,我们可以先全部统一样式,然后再单独设置最后一个元素样式覆盖公共样式。

也可以用 :not 选择器直接设置除了最后一个元素的样式。

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

//html
<ul>
   <li>1个元素</li>
   <li>2个元素</li>
   <li>3个元素</li>
</ul>

//css
li:not(:last-of-type){
  color: red;
}

13. 内容为空提示

有这么一个场景:用户搜索后要展示所有帖子的长列表,搜索为空的时候要提示:没找到相关内容
比如我们在用vue做的时候,常常是用内容长度做判断显示不同内容,例如:

<div class="content" v-if="content" v-html="content"></div>
<div class="tip" v-else>没找到相关内容</div>

其实我们完全可以用:empty选择器处理内容为空时的展示样式。

empty 伪类选择器匹配没有子元素(包括文本节点,包括空格)的每个元素。
jcode

14. 设置placeholder样式

input::placeholder {
   color: #919191;
   //其他样式
}	
input::-webkit-input-placeholder{
   color: #919191;
   //其他样式
}	

15. 隐藏滚动条

.element::-webkit-scrollbar {  
    display: none; /* Chrome Safari */  
}

16. 文字不换行、自动换行、强制换行

//不换行
.wrap {
  white-space:nowrap;
}
//自动换行
.wrap {
  word-break: break-word;
  white-space: normal;
}
//强制换行
.wrap {
  word-break:break-all;
}

17. 禁止用户选择

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

18. 固定宽高比的盒子

原理:padding设置百分比,是相对于父元素的宽度。

所以如果我们想要画一个长宽比为 m/n 的盒子时,只需要设置padding-bottom为:
( 元素宽度 / 父元素宽度 ) ∗ ( n / m ) (元素宽度 / 父元素宽度)*(n / m) (元素宽度/父元素宽度)(n/m)
jcode

19. 元素整体色调统一配置

currentcolor顾名思义就是当前的颜色。它代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上,或者嵌套元素的其他属性上。

比如现在写个卡片,其文字颜色和边框颜色一致,我们就可以只设置它的字体颜色,然后内部用到这个颜色时直接使用currentcolor关键字即可。
jcode

20. 动画暂停

animation-play-state可以控制动画状态
jcode

未完待续~ 点赞关注不要错过哦!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11443.html
标签
评论
发布的文章

echarts柱状图自动轮播

2024-06-16 01:06:46

Echarts--markPoint属性

2024-06-16 01:06:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!