前言
修改input plaebb7660262942eee93aac9a6847c188b6acdd0fccf95f653ee36d26f5cea8a8eholder样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平垂直居中...多么熟悉的功能呀！前端童鞋几乎每天都会和他们打交道，一起来总结我们的css幸福小片段吧！下次不用百度、不用谷歌，这里就是你的港湾。
查看源码地址：
1. 解决图片5px间距
你是否经常遇到图片底部莫名其妙多出来5px的间距，不急，这里有4种方式让它消失
方案1：给父元素设置font-size: 0
效果
html
<div class="img-container">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
div>
css
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
font-size: 0;
}
img{
width: 100%;
}
方案2：给img设置display: block
效果同上
html
<div class="img-container">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
div>
css
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
}
img{
width: 100%;
/*关键css*/
display: block;
}
方案3：给img设置vertical-align: bottom
效果同上
html
<div class="img-container">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
div>
css
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
}
img{
width: 100%;
/*关键css*/
vertical-align: bottom;
}
方案4：给父元素设置line-height: 5px;
效果同上
html
<div class="img-container">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F05%2F20200205093101_yfocq.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636215521&t=203563292576c66ba434651680281e8a" alt="">
div>
css
html,body{
margin: 0;
padding: 0;
}
.img-container{
background-color: lightblue;
/*关键css*/
line-height: 5px;
}
img{
width: 100%;
}
2.元素高度跟随窗口
有时候希望某个元素的高度和窗口是一致的，如果用百分比设置，那html、body等元素也要跟着一顿设置height: 100%有没有更简单的方法呢？
效果
html
<div class="app">
<div class="child">div>
div>
css
*{
margin: 0;
padding: 0;
}
.child{
width: 100%;
/*关键css*/
height: 100vh;
background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
}
3.修改input placeholder样式
第一个是经过改写的placeholder，第二个是原生的
效果
html
<input type="text" class="placehoder-custom" placeholder="请输入用户名搜索">
<input type="text" placeholder="请输入用户名搜索">
css
input{
width: 300px;
height: 30px;
border: none;
outline: none;
display: block;
margin: 15px;
border: solid 1px #dee0e9;
padding: 0 15px;
border-radius: 15px;
}
.placehoder-custom::-webkit-input-placeholder{
color: #babbc1;
font-size: 12px;
}
4. 巧用not选择器
有些情况下所有的元素都需要某些样式，唯独最后一个不需要，这时候使用not选择器将会特别方便
如下图：最后一个元素没有下边框
效果
html
<ul>
<li>
<span>单元格span>
<span>内容span>
li>
<li>
<span>单元格span>
<span>内容span>
li>
<li>
<span>单元格span>
<span>内容span>
li>
<li>
<span>单元格span>
<span>内容span>
li>
ul>
关键css
li:not(:last-child){
border-bottom: 1px solid #ebedf0;
}
5. 使用flex布局实现智能固定底部
内容不够时，规则说明要处于底部，内容足够多时，规则说明随着内容往下沉，大家一定也遇到过类似的需求，使用flex巧妙实现布局。
html
class="container">
<div class="main">我是内容区域div>
<div class="footer">规则说明div>
</div>
css
.container{
height: 100vh;
/* 关键css处 */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main{
/* 关键css处 */
flex: 1;
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.footer{
padding: 15px 0;
text-align: center;
color: #ff9a9e;
font-size: 14px;
}
6. 使用caret-color改变光标颜色
在做表单相关需求的时候，有时候需要修改一闪一闪光标的颜色。caret-color属性完美支持这个需求。
html
<input type="text" class="caret-color" />
css
.caret-color {
/* 关键css */
caret-color: #ffd476;
}
7. 移除type="number"尾部的箭头
默认情况下input type="number"时尾部会出现小箭头，但是很多时候我们想去掉它，应该怎么办呢？
如图：第一个输入框没有去掉小箭头的效果，第二个去掉了。
效果
html
<input type="number" />
<input type="number" class="no-arrow" />
css
/* 关键css */
.no-arrow::-webkit-inner-spin-button {
-webkit-appearance: none;
}
8. outline:none移除input状态线
输入框选中时，默认会带蓝色状态线，使用outline:none一键移除
效果
如图：第一个输入框移除了，第二个没有移除
html
<input type="number" />
<input type="number" class="no-outline" />
css
.no-outline{
outline: none;
}
9.解决IOS滚动条卡顿
在IOS机器上，经常遇到元素滚动时卡顿的情况，只需要一行css即可让其支持弹性滚动
body,html{
-webkit-overflow-scrolling: touch;
}
10.画三角形
效果
html
<div class="box">
<div class="box-inner">
<div class="triangle bottom">div>
<div class="triangle right">div>
<div class="triangle top">div>
<div class="triangle left">div>
div>
div>
css
.triangle { display: inline-block;
margin-right: 10px;
/* 基础样式 */
border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
border-top-color: #0097a7;
}
/*上*/
.triangle.top {
border-bottom-color: #b2ebf2;
}
/*左*/
.triangle.left {
border-right-color: #00bcd4;
}
/*右*/
.triangle.right {
border-left-color: #009688;
}
11.画小箭头
效果
html
<div class="box">
<div class="box-inner">
<div class="arrow bottom">div>
<div class="arrow top">div>
<div class="arrow right">div>
<div class="arrow left">div>
div>
div>
css
.arrow {
display: inline-block;
margin-right: 10px;
/* 基础样式 */
width: 0;
height: 0;
/* 基础样式 */
border: 16px solid;
border-color: transparent #CDDC39 transparent transparent;
position: relative;
}
.arrow::after {
content: "";
position: absolute;
/* 通过位移覆盖背景 */
right: -20px;
top: -16px;
border: 16px solid;
border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
transform: rotate(270deg);
}
/*上*/
.arrow.top {
transform: rotate(90deg);
}
/*左*/
.arrow.left {
transform: rotate(180deg);
}
/*右*/
.arrow.right {
transform: rotate(0deg);
}
12.图片尺寸自适应
vw vs padding
效果
html
<div class="box">
<div class="img-container">
<img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
div>
div>
<div class="box">
<div class="img-container">
<img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
div>
div>
<div class="box-vw">
<div class="img-container">
<img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="">
div>
div>
css
.box, .box-vw{
background-color: #f5f6f9;
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
}
.box:nth-of-type(2){
width: 260px;
}
/* vw方案 */
.box-vw .img-container{
width: 100vw;
height: 66.620879vw;
padding-bottom: inherit;
}
/* padding方案 */
.img-container{
width: 100%;
height: 0;
/* 图片的高宽比 */
padding-bottom: 66.620879%;
}
img{
width: 100%;
}
13.隐藏滚动条
第一个可以看到滚动条，第二个已隐藏了
效果
注意这里指的是容器可以滚动，但是滚动条仿佛透明一样被隐藏
html
<div class="box">
<div>
爱情会离开，朋友会离开，快乐会离开，但是考试不会,因为你不会就不会
div>
div>
<div class="box box-hide-scrollbar">
<div>只是因为在人群中多看了你一眼，你就--问我游泳健身了解一下？div>
div>
css
.box {
width: 375px;
overflow: scroll;
}
/* 关键代码 */
.box-hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.box > div {
margin-bottom: 15px;
padding: 10px;
background-color: #f5f6f9;
border-radius: 6px;
font-size: 12px;
width: 750px;
}
14.自定义文本选中的样式
第一个是默认选中状态，第二个是自定义选中状态
效果
html
<div class="box">
<p class="box-default">
昨天遇见小学同学，没有想到他混的这么差--只放了一块钱到我的碗里
p>
<p class="box-custom">
今年情人节，不出意外的话，一个人过，出意外的话--去 过
p>
div>
css
.box-custom::selection {
color: #ffffff;
background-color: #ff4c9f;
}
15.禁止选择文本
第一个可以选中，第二个无法选中
效果
html
<div class="box">
<p>好不容易习惯了自己的长相--去理了个发，又换了一种丑法p>
<p>国庆节放假，想跟女朋友去旅游，请大家帮忙推荐下--哪里有女朋友p>
div>
css
.box p:last-child{
user-select: none;
}
16.水平垂直居中
效果
html
<div class="parent">
<p class="child">每次临时抱佛脚的时候--佛祖他总是给我一脚p>
div>
css
.parent{
padding: 0 10px;
background-color: #f5f6f9;
height: 100px;
border-radius: 6px;
font-size: 14px;
// 以下是水平垂直居中关键代码
display: flex;
align-items: center;
justify-content: center;
}
17.单行文本溢出显示省略号
这个点估计全世界的前端都知道如何写，所以还是看为您准备的笑话乐一乐更有价值。
效果
html
<p class="one-line-ellipsis">不要轻易向命运低头，因为一低头就会看到赘肉 如果你愿意一层一层剥开我的心p>
css
.one-line-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* 非必须，只是为了制造一行放不下的效果 */
max-width: 375px;
}
18.多行文本溢出显示省略号
示例
html
<p class="more-line-ellipsis">上帝对人都是公平的给了你丑外表--也会配给你低智商 如果你愿意一层一层剥开我的心，你会发现--我缺心眼啊！p>
css
.more-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 设置n行，也包括1 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
19.清除浮动
一个仿佛有年代感的布局方式。现在移动端应该大部分不采用该布局方式了。
从图中可以看出，外层高度并未塌陷，就是使用了clearfix类的原因
效果
html
<div class="box clearfix">
<div class="float-left">div>
<div class="float-left float-left2">div>
<div class="float-left float-left3">div>
div>
css
body {
padding: 15px;
color: #324b64;
}
/* 关键代码 */
.clearfix{
zoom: 1;
}
.clearfix::after{
display: block;
content: '';
clear: both;
}
.box {
padding: 10px;
background-color: #f5f6f9;
border-radius: 6px;
font-size: 12px;
}
.box >div{
width: 29%;
height: 100px;
}
.float-left{
background-color: #faa755;
float: left;
margin-right: 10px;
}
.float-left2{
background-color: #7fb80e;
}
.float-left3{
background-color: #b2d235;
}
20. 使用filter:grayscale(1)使网页呈现哀悼模式
伟大的革命先烈们为我们祖国的诞生做出了巨大的牺牲，在相应节日里，我们的站点会呈现灰色哀悼模式，以此来纪念先烈们。
效果
css
body{
filter: grayscale(1);
}
- EOF -
CSS背景看这篇文章就够了【案例讲解】
本文从简单到深入讲解了CSS背景相关的知识，请一定要耐心看完,切勿浮躁!
CSS background是最常用的CSS属性之一。但是，在所有开发人员中使用多种背景仍然不是很了解。我将重点关注使用多种背景的潜力，并充分利用CSS的全部功能。
在本文中，我将background-image详细解释该属性，并提供一个可视化的解释器，说明如何堆叠多个背景及其实际好处。当然，将有一些视觉示例，您可以大饱口福！
如果您不了解CSS background属性，我更喜欢看Mozilla开发人员网络（MDN）的这份参考资料，它解释了CSS的background工作原理。
介绍
CSS background属性是以下属性的简写。
背景剪辑，背景颜色，背景图像，背景来源，背景位置，背景重复，背景大小和背景附件。
在这篇文章中，我将重点放在background-image，background-position和background-size。你准备好了吗？让我们潜入吧！
考虑以下示例。
.element {
background: url(cool.jpg) top left/50px 50px no-repeat;
}
背景图像被定位在左上角的元件的拐角，具有尺寸的50px * 50px。了解并记住位置和大小的顺序很重要。
在上图中，background-position后面跟着background-size。反之亦然！换句话说，以下CSS 无效：
.element {
/* Warning: Invalid CSS */
background: url(cool.jpg) 50px 50px/top left no-repeat;
}
背景位置
相对于background-origin属性设置的定位层定位元素。我喜欢的灵活性background-position。它具有多种定位元素的方式：
坐标系从左上角开始，默认值为0% 0%。
值得一提的是，该值top left与相同left top。浏览器足够聪明，可以确定其中一个用于x轴，哪个用于y轴。
.element {
background: url(cool.jpg) top left/50px 50px no-repeat;
/* is the same as */
background: url(cool.jpg) left top/50px 50px no-repeat;
}
背景尺寸
该属性的名称不言而喻。大小由width和height组成。对于该background-size属性，第一个是width，第二个是height。
不必使用两个值。您可以使用一个值，它将用于宽度和高度。
免责声明：值得一提的是CSS规范指出：“如果仅给出一个值，则第二个将被认为是自动的”。但是，该功能尚未在浏览器中实现，并且将来会更改。感谢Ilya Streltsyn的来信。
现在，我已经了解了CSS如何background工作的基础知识，让我们探索如何使用多个背景。
多种背景
背景属性可以有一个或更多的层，用逗号分隔。如果多个背景的大小相同，则其中一个将覆盖另一个背景。
.element {
background: url(cool.jpg) top left/50px 50px no-repeat,
url(cool.jpg) center/50px 50px no-repeat;
}
在上图中，我们有两个背景层。他们每个人的位置都不同。这是多种背景的基本用法。让我们探索一个更高级的示例。
堆叠顺序
当放置多个背景时，其中一个背景占据其父级的全部宽度和高度时，将进行堆叠顺序。决定何时将背景堆叠在彼此之上可能会有些混乱。考虑以下示例。
.hero {
min-height: 350px;
background: url('table.jpg') center/cover no-repeat,
url('konafa.svg') center/50px no-repeat;
}
我们有一个盘子和一张桌子。您希望上面的CSS产生什么结果？哪个先到？盘子还是桌子？
答案是桌子。在CSS中，第一个背景可以堆叠在第二个背景上，第二个背景可以堆叠在第三个背景上，依此类推。通过替换背景顺序，结果将达到预期。
.hero {
background: url('konafa.svg') center/50px no-repeat,
url('table.jpg') center/cover no-repeat;
}
纯色
假设您要绘制两个具有CSS背景的矩形，您将如何做？幸运的是，使用CSS渐变非常容易。当linear-gradient具有相同颜色的停止时，结果将为纯色。而已！
.hero {
background: linear-gradient(#3c88Ec, #3c88Ec)
}
通过探索CSS渐变的一个非常非常有用的用例，我们可以进一步采用这种方式。请继续关注用例部分！
用例和范例叠加
通常，您可能需要在英雄部分的顶部放置一个覆盖层，以便使文本易于阅读。通过堆叠两个背景可以轻松完成此操作。
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
url("landscape.jpg") center/cover;
}
更好的是，我们可以使用与上面相同的方法将淡色应用于元素。考虑以下：
.hero {
background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
url("landscape.jpg") center/cover;
}
使用CSS绘图使用CSS渐变绘制的可能性是无限的。您可以使用linear-gradient或radial-gradient更多。对于此基本示例，我将解释如何绘制笔记本电脑。
让我们拆卸笔记本电脑，看看我们需要使用什么梯度。
请注意，当分解便携式计算机项目时，现在更容易考虑如何将其实现为多个CSS背景。如果你注意到了，我创建了两个圈充当圆角的身体，因为有做与圆边的梯度没有直接的方法。
接下来是图纸。首先是将每个渐变定义为CSS变量及其大小。我喜欢使用CSS变量，因为它可以减少代码的复杂性，并使代码更简洁，更易于阅读。完成后，我将转到放置它们的步骤。
:root {
--case: linear-gradient(#222, #222);
--case-size: 152px 103px;
--display: linear-gradient(#fff, #fff);
--display-size: 137px 87px;
--reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
--reflection-size: 78px 78px;
--body: linear-gradient(#888, #888);
--body-size: 182px 9px;
--circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
--circle-size: 10px 10px;
}
现在我们定义了渐变及其大小，下一步是放置它们。考虑下图，以获得更好的视觉解释。
显示反射
如前所述，应该首先定义需要在顶部的元素。在我们的情况下，显示反射应该是第一个渐变。
液晶显示器
显示屏位于 x轴的中心，并且位于6pxy轴的位置。
塑料盒
外壳位于显示屏下方，并且位于x轴的中心，并且位于0pxy轴。
身体
那是图形中最有趣的组件。首先，主体是一个矩形，每个侧面（左侧和右侧）有两个圆圈。
最后结果
:root {
--case: linear-gradient(#222, #222);
--case-size: 152px 103px;
--case-pos: center 0;
--display: linear-gradient(#fff, #fff);
--display-size: 137px 87px;
--display-pos: center 6px;
--reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
--reflection-size: 78px 78px;
--reflection-pos: top right;
--body: linear-gradient(#888, #888);
--body-size: 182px 9px;
--body-pos: center bottom;
--circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
--circle-size: 10px 10px;
--circle-left-pos: left bottom;
--circle-right-pos: right bottom;
}
.cool {
width: 190px;
height: 112px;
background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);
background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);
background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);
background-repeat: no-repeat;
/*outline: solid 1px;*/
}
混合多个背景
可以混合使用多个背景时会令人兴奋。我可以解释的最简单的用例是使图像去饱和。考虑一下您background-image在CSS中有一个，并且想要将其转换为黑色和白色的需求。
.hero {
background: linear-gradient(#000, #000),
url("landscape.jpg") center/cover;
background-blend-mode: color;
}
翻译原文:ishadeed.com/article/css-multiple-backgrounds
最后
关注我们添加【纯技术前端进阶技术群】，回复：【资料包】领取前端进阶资料包
