《知识点累积》HTML+JS+CSS

1.padding 不可用为负值

W3School padding 。margin 可以；

2.背景图片居中铺平占满

background url('/images/login-bg.png') no-repeat center center;
background-size: 100% 100%;
1
2

3.居中对齐

不知元素自身宽度

left: 50%;
transform: translateX(-50%);
1
2

4.单行或多行文字省略

单行

div {
    width: 70px;// 必须设置宽度
    overflow: hidden;// 溢出隐藏
    text-overflow: ellipsis;// 用 ... 代替
    white-space: nowrap;// 不换行(单行)
}
1
2
3
4
5
6

多行

div {
    height: 35px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;// 第 2 行省略，同理为 1 则是第 1 行省略。但注意要控制高度
}
1
2
3
4
5
6
7

5.原生 input 改变 placeholder 字体颜色

// WebKit 谷歌
input::-webkit-input-placeholder {
    color: #8ba6cd;
}
// Mozilla Firefox 4 - 18 适配火狐
input::-moz-placeholder { 
    color: #8ba6cd;
}
// Mozilla Firefox 19+ 适配火狐
input::-moz-placeholder {
    color: #8ba6cd;
}
// IE 10+  
input:-ms-input-placeholder { 
    color: #8ba6cd;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.原生 select 标签选择后的边框修改

select:focus-visible {
    /* outline: -webkit-focus-ring-color auto 1px; 这是谷歌浏览器的原生样式*/
    outline: none;
}
1
2
3
4

7.字体颜色渐变

html

<span>这是一个渐进色的文字span>
1

CSS

1. 文字 color 没有渐变设置，这里使用 background 做背景渐进色，然后设置 background-clip:text 裁剪，最后让 color 为透明。以此达到渐变效果；

2. 一定要先设置 background 再 设置 background-clip 做裁剪，是有先后顺序的。否则，无效！！！

注意：目前只在 Chrome 和 Microsoft Edge上测试可用。

span {
    font-size: 36px;
    background: linear-gradient(to right,red, green);
    background-clip: text;
    -o-background-clip: text;
    -ms-background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;    
    color: transparent;
}
1
2
3
4
5
6
7
8
9
10

8.两边细中间粗的渐变直线效果

html

<div class="line">div>
1

css

  .line {
    width: 380px;
    height: 1px;
    background-image: linear-gradient(90deg, rgba(21,94,162,0)0%, rgba(21,94,162,0.5)50%,rgba(21,94,162,0)100%);
    opacity: 0.46;
  }
1
2
3
4
5
6

9.英文单词首字母大写

<span style="text-transform:capitalize">hello worldspan>
1

注意：对每个单词的首字母都改为大写

单词capitalize 百度翻译如下：

10.正方形列表

html：默认是圆形

<ul>
	<li>oneli>
	<li>twoli>
	<li>threeli>
ul>
1
2
3
4
5

css

ul {
	list-style-type: square;
	// list-style-type: none;// 取消圆点
}
1
2
3
4

11. 元素是否对鼠标事件做出反应

pointer-events

pointer-events: none;// 不反应，类似挖空效果
1

12.改变 li 点符号

li::marker {
	content: '>';
}
1
2
3

li::marker {
    color:#69afe5;
    margin-right: 5px;
    font-size: 20px;
}
1
2
3
4
5

13.清明站点变灰

CSS3 filter(滤镜)：定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

html{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}
1
2
3
4
5
6
7

14.Html 导入其它字体

CSS Html 导入其它字体

15倾斜 30°

// 向右
transform: skewX(-30deg);
// 向左
transform: skewX(30deg);
1
2
3
4

16.input 聚焦时，父 div 边框变化使用

input-div:focus-within {
	border-color: red;
}
1
2
3

stylus写法

input-div {
	&:focus-within {
        border-color: red;
    }
}
1
2
3
4
5

17.滚动条

::-webkit-scrollbar {/*滚动条整体样式*/
    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 1px;
    background: rgb(43, 103, 176);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
    background: rgb(20, 67, 125);
}
::-webkit-scrollbar-corner {/* 边角 */
    background: rgb(20, 67, 125);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

18.pointer-events

pointer-events：设置元素是否对鼠标事件做出反应。

此篇说的特别详细。

none 和 auto(默认值)