想摸鱼吗？先掌握这 19 个 css 技巧( 二 ) _小知识

文章插图

关键代码：
.box {padding: 15px;background-color: #ffffff;border-radius: 6px;display: flex;align-items: center;justify-content: center;}.arrow {display: inline-block;margin-right: 10px;width: 0;height: 0;/* Base Style */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);}事例地址：https://codepen.io/qianlong/pen/ZEaXEEP
12. 图像适配窗口大小

文章插图

事例地址：https://codepen.io/qianlong/pen/PoOJoPO
13. 隐藏滚动条第一个滚动条是可见的，第二个滚动条是隐藏的。这意味着容器可以被滚动，但滚动条被隐藏起来，就像它是透明的一样。

文章插图

关键代码：
.box-hide-scrollbar::-webkit-scrollbar {display: none; /* Chrome Safari */}事例地址：https://codepen.io/qianlong/pen/yLPzLeZ
14. 自定义选定的文本样式

文章插图

关键代码：
.box-custom::selection {color: #ffffff;background-color: #ff4c9f;}事例地址：https://codepen.io/qianlong/pen/jOaGOVQ
15. 不允许选择文本

文章插图

关键代码：
.box p:last-child {user-select: none;}事例地址：https://codepen.io/qianlong/pen/rNYGNyB
16. 将一个元素在水平和垂直方向上居中

文章插图

关键代码：
display: flex;align-items: center;justify-content: center;事例地址：https://codepen.io/qianlong/pen/VwrMwWb
17. 单行文本溢出时显示省略号

文章插图

关键代码：
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 375px;事例地址：https://codepen.io/qianlong/pen/vYWeYJJ
18. 多行文本溢出时显示省略号

文章插图

关键代码：

overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/* set n lines, including 1 */-webkit-line-clamp: 2;-webkit-box-orient: vertical;

事例地址：https://codepen.io/qianlong/pen/ZEaXEJg
19.使用 "filter:grayscale(1)"，使页面处于灰色模式。

文章插图

关键代码：
body{filter: grayscale(1);}

想摸鱼吗？先掌握这 19 个 css 技巧( 二 )

推荐阅读

「我的第一部5G手机」助推5G换机潮闻泰科技着手招工增产线

特朗普|特朗普想推迟美国大选？美媒：单方面改动或取消大选日程是非法的

高帮鞋怎么搭裤子？高帮鞋配什么裤子

阔的拼音读法?阔字的拼音和组词怎么写?

高速特工|货车可能变“祸车”，客货混装图省事

罗志祥：《极限挑战》第六季罗志祥出场方式特别，谁注意导演说的这句话？

经济导报|济南通报批评17个建设工程扬尘污染治理不达标项目

驱动中国|软件公司售后如虎添翼，有了向日葵技术支持坐席

穿搭|能搭成法式简洁散漫，还可以操控现代美式现代都市，达妹会穿着打扮专业能力

『』爱上烟火气的家，85㎡，简约却不简单，用细节表达对生活的热爱！

【区议员】一周内，香港两个区议会主席都犯罪了，未来将是一个怎样的世代？

732校友李西廷个人向中国科大捐赠1.068亿元

白茶美容功效好,白茶白牡丹功效

黄河新闻网吕梁频道|中国电信5G+智慧煤炭产业应用亮相第十九届太原煤炭装备展

三国演义中诸葛亮借东风是真的吗?历史上诸葛亮真的能借东风吗

苹果中国官网BUG：千元产品卖一两百

大嘴扒|睡觉怎么保持形象？网友：不敢相信自己的眼睛，女明星私下的真实状态

喜欢吃菜的味道|可以提高孩子免疫力，秋冬换季孩子经常生病？做到4点

「生肖」6月尾，横财一路发，3大生肖事业顺，扬眉吐气变富翁

中金网|板块异动：体外诊断板块大涨