前端实用的20个css技巧
借问工资何时涨?好个曲终人散事渺茫。
本文在某金也有发文,推荐在某金观看,方便在线预览效果某金
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布局的时候有遇到过这种情况吗?
- 每行固定元素个数
- 每行元素都是space-between的效果(两端对齐,项目之间的间隔相等,即剩余空间等分成间隙)
- 最后一行元素需要靠左对齐
这时候我们可以采用以下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-filter
与filter
都可以写出高斯模糊的效果,但是两者使用起来还是有区别的,而且使用的目标也不同。
区别:
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
未完待续~ 点赞关注不要错过哦!
前端实用的20个css技巧相关推荐
- css label 居中布局_用好这20个css技巧快速提升你的CSS技能
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要 ...
- 如何提升你的CSS技能?掌握这20个css技巧即可[完整版]
前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快.这里涵盖了20个css技巧来帮助 ...
- css 自动换行_前端必备!20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中 将一段文字置于容器的水平中点 ...
- css 背景效果_前端教程 :20个CSS的常用套路附demo的效果实现与源码
前言 本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 1.交错动画 有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么 ...
- web布局最实用的12条css技巧
1:Rounded corners without images 效果图-- Rounded corners without images <div id="container&quo ...
- 前端必看的 HTML + CSS技巧
1. 固定底部内容 这种是一个非常常见的布局方式,但是对于新手来说是比较常见的难题. 这种布局方式在后台管理系统中比较常见,当我们内容不足浏览器窗口高度时,底部内容需要固定在底部.当内容超出了浏览器窗 ...
- 前端:20个 CSS 快速提升技巧
本文涵盖了20个css技巧,可以解决许多工作中常见的问题. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准, ...
- 20个 CSS 快速提升技巧
转载自:http://www.javanx.cn/20190321/css-skill/ 本文涵盖了20个css技巧,可以解决许多工作中常见的问题. 1.使用CSS重置(reset) css重置库如n ...
- css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
最新文章
- iOS 跑马灯之 TXScrollLabelView
- RocketMQ-初体验RocketMQ(11)-过滤消息_自定义Java类筛选消息
- wordpress安装及使用
- python3.6字典有序_为什么从Python 3.6开始字典有序并效率更高
- 【C++深度剖析教程7】C++之类中的函数重载
- python中list index out of range_Python知识精解:str split()方法
- 重磅!Python又第一了!网友:为什么找不到好工作?真相让人脸红…
- 1539. 第 k 个缺失的正整数
- 这是小小本周的第六篇,本篇小小将会介绍一个很古老很古老很古老的为什么系列之不能重写service方法。...
- 服务器访问危险网站降权重,网站权重下降,原因有哪些?如何处理?
- fork/join框架Java
- 特征选择与特征提取(降维)
- 文华wh6如何修改服务器,文华财经 软件特色功能介绍修改
- qmail加防病毒网关的郁闷经历
- DirectSHOW中的视频捕捉 (乱七八糟整理)
- 根据设计稿,用JS计算rem的值
- java全局搜素快捷键_eclipse全局搜索快捷键是什么
- uni-app 输入框类型
- Mac下嵌入式开发问题初步
- 计算机机房必须用七氟丙烷灭火器吗,释放七氟丙烷气体会不会使人窒息?