王新阳

可以通过更改#document片段的CSS来实现这一点，这些是DOM1规范，所有浏览器都支持。
以下解决方案是特定于webkit的

//全屏按钮
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
    display: none;
}
//进度条
video::-webkit-media-controls-timeline {
    display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
    display: none;            
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
    display: none;            
}
//音量按钮
video::-webkit-media-controls-mute-button {
    display: none;            
}
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;            
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
    display: none;            
}
//所有控件-通过取消video标签的controls属性更方法
video::-webkit-media-controls-enclosure{ 
    display: none;
}

扩展资料：TML5相对于之前的标准添加了许多新的语法特征，其中包括video、audio和canvas元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容。其它新的元素如section、article、header和nav则是为了丰富文档的数据内容。
同时也有一些属性和元素被移除掉，一些元素被重新定义或标准化。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
HTML5标准规范文档对于如何提高浏览器兼容性和SEO，保持代码结构的整洁性，标签元素的正确嵌套，自定义属性以及字符实体的使用，进行了详细的描述，其中也对HTML5移除的一些元素和属性进行了收集整理以供参考。

.demo{
    transform-style:preserve-3d;
    perspective:300px;
}
.demo p{
    transition:ease .5s;
}
.demo p:hover{
    transform:rotateY(180deg);
}

.demo1{
	color:#f35626;
	background-image:-webkit-linear-gradient(92deg, #f35626, #feab3a);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	-webkit-animation:hue 10s infinite linear;
}
@-webkit-keyframes hue {
	from{
		-webkit-filter:hue-rotate(0deg);
	}
	to{
		-webkit-filter:hue-rotate(-360deg);
	}
}

甲乙丙丁

@keyframes masked-animation {
	0% {background-position:0 0;}
	100% {background-position:-100% 0;}
}

.demo2{
	background-image:-webkit-linear-gradient(left,#55ccd3,#584498,#55ccd3,#584498,#55ccd3);
	-webkit-background-size:200% 100%;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	-webkit-animation:masked-animation 2s linear infinite;
}

戊己庚申

2、定义某元素下的变量
.look{
  --borderColor: #ccc;
}

设置视频背景透明

https://www.zhangxinxu.com/wordpress/2019/05/mp4-video-background-transparent/

https://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/

video {
    mix-blend-mode: screen;
}

poster布满视频画面

video {
    object-fit: cover;
}

可取值：fill、contain、cover

display:block;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;

多行

display:block;
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

单行

display:block;
overflow:hidden;
text-overflow:ellispis;
white-space:nowrap;

转自：https://www.jianshu.com/p/d9373a86b748/

参考：
https://www.cnblogs.com/ranyonsue/p/9487599.html
https://www.jianshu.com/p/c2addb233acd

.box::-webkit-scrollbar{
  width: 4px;
  height: 1px;
}
.box::-webkit-scrollbar-thumb{
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #555;
}
.box::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #eee;
}

修改style样式：
1. 通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式；
2. 修改特定元素节点的style内容cssText可以一次性修改多个css属性style.attrName 修改单个属性 attrName的值
3. 通过setAttribute 修改style属性值

<style>
.test {font-size: 30px;color: blue;background-color: blueviolet}
</style>
// html
<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
// js
var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式: 
stylesheetBtn.addEventListener('click', function(e) {
    var stylesheet = document.styleSheets[0];
    stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
    testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
    testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
    testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
}, false);

转自：https://www.yangqq.com/jstt/css3/2013-07-15/379.html

CSS3 伪类选择器 nth-child() 的用法

伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以样式更加个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。

:nth-child()选择某个元素的一个或多个特定的子元素；你可以按这种方式进行选择： 

:nth-child(length);/*参数是具体数字 length为整数*/

:nth-child(n);/*参数是n,n从0开始计算*/

:nth-child(n*length)/*n的倍数选择，n从0开始算*/

:nth-child(n+length);/*选择大于length后面的元素*/

:nth-child(-n+length)/*选择小于length前面的元素*/

:nth-child(n*length+1);/*表示隔几选一*/

例子：

:fist-child选择某个元素的第一个子元素

例子：

li:first-child {background: green;}/*把第1个li的背景设为绿色*/

:last-child选择某个元素的最后一个子元素

例子：

li:last-child {background: green;}/*把最后一个li的背景设为绿色*/

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算

:nth-last-child()选择器和前面的:nth-child()很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。

例子：

li:nth-last-child(4) {background: red;}/*把倒数第4个li的背景设为红色*/

:nth-of-type()选择指定的元素

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处。比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

p:nth-of-type(even) {background-color: lime;}

除了可以将n设置为odd（偶数）或even（奇数）外，还可以将n设置为表达式，比如，nth-of-type(3n+2)

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算

这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

同样在IE6-8和FF3.0-浏览器不支持这种选择器

:first-of-type选择一个上级元素下的第一个同类子元素；

:last-of-type选择一个上级元素的最后一个同类子元素；

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。

:only-child表示的是一个元素是它的父元素的唯一一个子元素

如果我需要在ul只有一个p元素的时候，改变这个li的样式，那么我们现在就可以使用:only-child,如：

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素

是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素，比如说

如果我们想只选择中上面中的h2元素，我们就可以这样写，

h2:only-of-type{color:red;}

:empty选择的元素里面没有任何内容

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示，那你就可这样来写：

p:empty {display: none;}