共计 2758 个字符，预计需要花费 7 分钟才能阅读完成。
如何暗藏滚动条
`// chrome 和 Safari
*::-webkit-scrollbar {width: 0 !important}
// IE 10+
* {-ms-overflow-style: none;}
// Firefox
* {overflow: -moz-scrollbars-none;}
`
批改滚动条款式
`*::-webkit-scrollbar {
/定义纵向滚动条宽度 /
width: 12px!important;
/ 定义横向滚动条高度 /
height: 12px!important;
}
*::-webkit-scrollbar-thumb {
/ 滚动条外部滑块 /
border-radius: 16px;
background-color:#c1c1c1;
transition: background-color 0.3s;
&:hover {
/ 鼠标悬停滚动条外部滑块 /
background: #bbb;
}
}
*::-webkit-scrollbar-track {
/ 滚动条外部轨道/
background: #f1f1f1;
}
`
批改 input 框 placeholder 的色彩
`input::input-placeholder{
color:red;
}
`
按钮不可点击的款式
`cursor: not-allowed
`
CSS 鼠标指针事件：阻止任何 JS 事件
`.disabled {pointer-events: none;}
`
文字超出强制 n 行 超出局部用省略号代替
`div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: n; // 行数
-webkit-box-orient: vertical;
}
`
批改字体间距
`letter-spacing: 8px
`
谷歌浏览器控制台提醒 /deep/ 将要被移除
`<style scoped lang=”less”>
// 采纳的 less 的本义和变量插值
@deep: ~’>>>’;
.select {
@{deep} .ivu-card-body {
width: 100%;
}
}
</style>
`
animate 动画停在某个关键帧
`animation-fill-mode: forwards;
`
盒子暗影
`box-shadow: 0 2px 2px rgba(10,16,20,.24),0 0 2px rgba(10,16,20,.12);
transition: box-shadow .5s;
`
11. 使图片笼罩它的整个容器
`img {
object-fit: cover;
}
`
表格中 td 的内容主动换行
`<table style=”word-break:break-all; word-wrap:break-all;”>
`
浏览器打印性能 图片生效
`body {
-webkit-print-color-adjust: exact;
}
`
背景图像完满适配视口
`body {
background-image: url(‘xxx’);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
`
如何应用多个背景图片
`body {
background-image: url(‘xxx’), url(‘xxx’);
background-position: center, top;
background-repeat: repeat, no-repeat;
background-size: contain, cover;
}
`
如何给背景图叠加突变
`body {
background-image:
linear-gradient(
4deg,
rgba(38,8,31,0.75) 30%,
rgba(213,49,127,0.3) 45%,
rgba(232,120,12,0.3) 100%),
url(“xxx”);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center
}
`
如何将背景图设为文本色彩
`<body>
<h1>hello!!!</h1>
</body>
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
text-align: center;
min-height: 100vh;
font-size: 120px;
}
h1 {
background-image: url(“xxx”);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
`
如何获取和设置盒子的宽高
`// 第一种
dom.style.width/height // 只能获取内联款式的元素宽高
// 第二种
dom.currentStyle.width/height // 只有 IE 浏览器反对
// 第三种
dom.getComputedStyle(Dom).width/height // 只有浏览器渲染后能力获取 兼容好
// 第四种
dom.getBoundingClientRect().width/height // 计算一个元素的相对地位（绝对于视窗左上角）能拿到元素的 left、right、width、height
`
如何让图片垂直居中
`img {
vertical-align: middle;
margin-top: -xpx;
}
`
打消图片自带的间距
`img {
display: block;
}
// 或者 父盒子
div {
font-size: 0;
}
`
