1. clip（已被clip-path代替） 、clip-path属性
剪裁绝对定位元素 position指定为absolute。
-
常用值 （其他属性参考：developer.mozilla.org/zh-CN/docs/… ）
-
inset()(en-US) 定义一个 inset 矩形。 -
circle()(en-US) 定义一个圆形（使用一个半径和一个圆心位置）。 -
ellipse()(en-US) 定义一个椭圆（使用两个半径和一个圆心位置）。 -
polygon()(en-US) 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。 -
path()(en-US) 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。
-
-
使用示例
- 画一条流动的直线
.div{
height: 5px;
width: 180px;
animation: lineSlider 4s linear infinite;
}
@keyframes lineSlider {
0% {
clip-path: inset(0 0 0 100%);
}
100% {
clip-path: inset(0 0 0 0);
}
}
2. div的行内属性
style设置css样式(扩展了解style标签)align设置div盒子内的内容居中、居左、居右id引人外部对应#（井号）选择符号样式class引人外部对应.（句号）选择符号样式title设置div（标题）鼠标经过时显示文字（扩展了解 title标签）
3. 文字两端对齐
text-align: justify;（适用于一大段文字的展示）
4. video标签的属性
- 设置宽高不生效：需要添加
object-fit:fill;属性 - 属性含义
- autoplay—自动播放
- loop—循环播放
- muted—静音播放
- controls /*浏览器应该为视频提供播放控件（包括- 播放、 暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）） */
- poster ="images.jpg" /*视频封面*/
- webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
- playsinline="true" /*IOS微信浏览器支持小窗内播放*/
- x-webkit-airplay="allow"
- x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
- x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
- x5-video-orientation="portraint" /*播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏*/
5. mix-blend-mod
元素的内容应该与元素的直系父元素的内容和元素的背景如何混合
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
6. filter 滤镜属性
-
属性值
- drop-shadow (offset-x offset-y blur color)：给图像内容设置 阴影 ，与 box-shadow 属性类似，不过box…是对整个外轮廓打上阴影，而drop对针对图像内容打阴影
- hue-rotate(deg)： 调整元素的色相角度，没有最大值。每 360deg 一个变化周期
