css3的一些属性就到这里了，主要还是对一些不常用的属性进行回顾，常用的属性就没必要了如：width height这些，已经用到烂了。还有一些没写出来的基本就是实验性属性和兼容性不好的属性了，如有些功能只能在火狐使用，那这种就不写出来了。
该专栏文章仅做本人学习记录～～当然，欢迎大佬赐教～～～～（能赐教最好了！）
标签
<p class="t">direction</p>
<p>设置文本、表格列和水平溢出的方向。对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 rtl；</p>
<div style="direction:rtl;">这个段落用中文书写的，但是方向是从右到左，是错误的。</div>
<p class="t">empty-cells</p>
<p>效果应该就是是否显示没有可见内容的td&th的边框和背景</p>
<table style="empty-cells: show;">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
<br>
<table style="empty-cells: hide;">
<tr>
<td>Moe</td>
<td>Larry</td>
</tr>
<tr>
<td>Curly</td>
<td></td>
</tr>
</table>
<p class="t">filter</p>
<p>滤镜，通常用于调整图像</p>
<p>属性值：blur contrast grayscale hue-rotate drop-shadow</p>
<div class="e1">
<div></div>
<div></div>
</div>
<p class="t">hanging-punctuation</p>
<p>指定了标点符号应该放在文本句子的开头还是结尾。悬挂标点符号可能被放在线框外。</p>
<p>没试出什么效果，欢迎大佬指教～～</p>
<p style="hanging-punctuation:last;margin:.5rem">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
<p class="t">image-orientation</p>
<p>似乎是将图像的方向进行更正，有兼容性问题</p>
<img src="https://live.mdnplay.dev/en-US/docs/Web/CSS/image-orientation/oriole.jpg" style="width: 200px;image-orientation:none;">
<p class="t">image-rendering</p>
<p>设置图像缩放算法</p>
<p>没用过，感觉效果像是把图像的锯齿放大，希望有大佬指教下</p>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png" style="height: 480px;image-rendering:pixelated;">
<p class="t">inline-size</p>
<p>定义元素块的水平或垂直大小，具体取决于其writing-mode，对应元素的width或height</p>
<div class="e2">
这是一段文案
</div>
<p class="t">inset</p>
<p>简写属性，对应top right bottom left</p>
<p>写法与padding margin相同</p>
<div class="e3">
<div></div>
</div>
<p class="t">isolation</p>
<p>与mix-blend-mode结合使用</p>
<p>我不是很理解这个的作用和应用场景，希望大佬指教～～</p>
<div class="big-square ">
<div class="isolation-auto">
<div class="small-square">auto</div>
</div>
<div class="isolation-isolate">
<div class="small-square">isolate</div>
</div>
</div>
<p class="t">mask</p>
<p>给元素添加遮罩</p>
<p>似乎兼容性不是太好</p>
<img class="e4" src="https://live.mdnplay.dev/en-US/docs/Web/CSS/image-orientation/oriole.jpg" >
<div class="e5"></div>
<p class="t">math-style</p>
<p>定义MathML 公式应以正常高度还是紧凑高度呈现。</p>
<p class="t">mix-blend-mode</p>
<p>描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。</p>
<p>大致效果就是子元素img与父元素的背景相融合，具体怎样融合就看你选的值了</p>
<p>属性值：normal; multiply; screen; overlay; darken; lighten; color-dodge color-burn; hard-light; soft-light; difference; exclusion; hue; saturation; color; luminosity; initial; inherit; unset;</p>
<p class="t">object-fit</p>
<p>指定元素的内容（img或video）如何适应到宽高确定的框</p>
<div class="e6">
<img src="https://live.mdnplay.dev/en-US/docs/Web/CSS/image-orientation/oriole.jpg" >
</div>
<p class="t">object-position</p>
<p>定义图像内容在图像元素中的位置</p>
<img class="e7" src="https://live.mdnplay.dev/en-US/docs/Web/CSS/image-orientation/oriole.jpg" >
<p class="t">offset</p>
<p>用来写path的简写属性，不擅长这个。</p>
<p class="t">order</p>
<p>定义弹性盒子内的元素布局顺序，像是个布局权重，值越低排越前</p>
<div class="e8">
<div class="b1">1</div>
<div class="b2">2</div>
<div class="b3">3</div>
</div>
<p class="t">quotes</p>
<p>设置引号的样式，可能做国际化的时候会用到</p>
<p class="t">will-change</p>
<p>性能优化的最终手段（完全没用过...）</p>
<p>在以下属性发生变化时会优化性能</p>
<p>属性值：transform opacity contents scroll-position</p>
样式
td,th {
border: 1px solid gray;
padding: 0.5rem;
}
.e1{
display: flex;
margin-top: 20px;
filter: contrast(100%) blur(2px);
}
.e1 div{
width: 50px;
height: 50px;
background: pink;
transform: rotate(45deg);
// border: solid 1px;
}
.e2{
width: 200px;
background: pink;
inline-size: 40px;
writing-mode:vertical-lr;
}
.e3{
width: 300px;
height: 200px;
background: pink;
position: relative;
}
.e3 div{
width: 100px;
height: 100px;
background: red;
position: absolute;
inset: 10px 20px 30px 40px;
}
.isolation-auto {
isolation: auto;
}
.isolation-isolate {
isolation: isolate;
}
.big-square {
background-color: rgb(0, 255, 0);
width: 200px;
height: 210px;
}
.small-square {
background-color: rgb(0, 255, 0);
width: 100px;
height: 100px;
border: 1px solid black;
padding: 2px;
mix-blend-mode: difference;
}
.e4{
-webkit-mask: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
}
.e5{
width: 300px;
height: 300px;
border: solid 1px black;
background: pink;
-webkit-mask: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
}
.e6{
width: 300px;
height: 300px;
}
.e6 img{
width: 100%;
height: 100%;
object-fit: cover;
}
.e7{
width: 300px;
height: 300px;
border: solid 1px red;
object-position: 50px 50px;
object-fit: none;}
.e8{
display: flex;
}
.e8 div{
width: 100px;
height: 100px;
border: solid 1px red;
}
.e8 .b1{
order: 2;
}
.e8 .b2{
order: 3;
}
.e8 .b3{
order: 0;
}
.t{
color: red;
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
