重新学一下CSS3，基本很少了解其它属性，多是常用属性一把梭。
现在发现有很多从来没用过的属性它真的很好用！！
震惊自己为啥现在才知道这些？？？？
上代码
标签
<p class="t">appearance</p>
<p>使某个元素的外观变为某个标签的原生外观</p>
<p>如将下面div变为button的外观</p>
<!--
.e1{ appearance:button } // 似乎不起作用，不过应该是我不会用～
-->
<div class="e1">button</div>
<p class="t">aspect-ratio</p>
<p>为元素规定了首选纵横比，使其在只定义width或height时，按规定纵横比自动适配width或height</p>
<!--
.e2{
height: 50px;
background: pink;
aspect-ratio: 16/9;
}
-->
<div class="e2"></div>
<p class="t">accent-color</p>
<p>为表单控件设置强调色</p>
<p>仅支持以下元素</p>
<!--
.e3{
accent-color: red;
}
-->
默认<input type="radio" />
<input type="checkbox" />
<input type="range" />
<progress value="50" max="100" ></progress>
<br/>
设置accent-color
<input type="radio" class="e3">
<input type="checkbox" class="e3">
<input type="range" class="e3">
<progress value="50" max="100" class="e3"></progress>
<p class="t">all</p>
<p>将除了unicode-bidi和direction之外的所有属性重设为其初始值或继承值</p>
<!--
.all{
all:initial;
}
-->
<p class="t">backdrop-filter</p>
<p>背景滤镜，常用功能就是做一个毛玻璃效果</p>
<p>还有很多属性，可自行尝试</p>
<!--
.e4{
width: 100%;
height: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
background: rgb(255 255 255 / 0.3);
}
-->
<div style="position: relative;width:max-content">
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg" style="width:200px;height:200px;" />
<div class="e4">Hello World</div>
</div>
<p class="t">backface-visibility</p>
<p>指定元素背面朝向时是否可见，可制作翻牌效果</p>
<p>可选属性：hidden visible</p>
<!--
.e5{
width: 50px;
height: 100px;
background: pink;
backface-visibility: hidden;
transition: transform 1s;
}
.e5:hover{
transform: rotateY(180deg);
}
-->
<div class="e5"></div>
<p class="t">block-size</p>
<p>根据元素的书写模式定义了元素块的横向或纵向尺寸</p>
<p>该属性对应width或height</p>
<!--
.e6{
block-size: 100px;
writing-mode: vertical-rl;
background: pink;
}
-->
<div class="e6">Hello World</div>
<p class="t">caption-side</p>
<p>将表格的标题（caption标签）放到规定的位置。但是具体显示的位置与表格的 writing-mode 属性值有关。</p>
<table border style="caption-side: bottom;">
<caption style="border:solid 1px black">
表格上方的标题
</caption>
<tr>
<td>一些数据</td>
<td>又一些数据</td>
</tr>
</table>
<p class="t">break-after&break-before</p>
<p>隔断一个区域</p>
<!--
.e7 {
column-count:3;
column-rule:2px dotted olivedrab;
}
.e7 hr {
break-after:column;
//break-before:column
}
-->
<div class="e7">
<h2>geek 1</h2>
<p>
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science portal 1
Computer Science
portal 1
</p>
<hr />
<h2>geek 2</h2>
<p>
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science portal 2
Computer Science
portal 2
</p>
</div>
<p class="t">caret-color</p>
<p>用于定义插入光标的颜色（可编辑区域的光标如input）</p>
<input type="text" style="caret-color:red;padding:10px">
<p class="t">clip-path</p>
<p>使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。</p>
<!--
.e8{
clip-path: circle(40%);
width: 200px;
height: 200px;
}
-->
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg" class="e8" />
<p class="t">color-scheme</p>
<p>允许元素指示它可以舒适地呈现哪些颜色方案。</p>
<p>属性值：normal dark light</p>
<textarea style="color-scheme: dark;" cols="30" rows="10">Hello</textarea>
<p class="t">column-*</p>
<p>column-count，描述元素的列数，可以是元素或文案</p>
<p>column-fill，没有很理解效果，欢迎各位评论区指出～～</p>
<p>column-gap，列之间的间隔</p>
<p>column-rule，定义多列之间的分割线，属性值参考border</p>
<p>column-span，值为all时，可以让元素跨越所有列</p>
<!--
.e9{
height: 400px;
border: solid 1px black;
column-count: 3;
column-fill: balance;
column-gap: 10px;
column-rule:dotted 3px red;
}
.e9 .span{
padding: 10px;
background: pink;
column-span: all;
}
-->
<div class="e9">
<div style="width:100px;height:100px;border:solid 1px red"></div>
<div style="width:100px;height:100px;border:solid 1px red"></div>
<div class="span"></div>
<div style="width:100px;height:200px;border:solid 1px red"></div>
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
</div>
<p class="t">columns</p>
<p>定义列数，可以是数值或宽度（如：100px）</p>
<!--
.e10{
columns: 3;
}
-->
<div class="e10">
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案这是一段文案
</div>
<p class="t">contain</p>
<p>使元素和它的子元素的DOM变化不会触发父元素重新布局、渲染等。</p>
<p>属性值：layout style paint size content strict</p>
<p>layout为开启布局限制，直观的效果就是子元素position失效了</p>
<p>style开启样式限制，官方说存在某些风险，暂时被移除</p>
<p>size的作用是父元素大小不会被子元素影响</p>
<p>paint开启渲染限制，其子元素不会在父元素的边缘外显示，类似overflow:hidden</p>
<p>content为开启除size外的限制</p>
<p>strict开启layout style paint</p>
<p>常用于性能优化，重绘重排</p>
<!--
.e11{
width: 200px;
height: 100px;
border: dotted 2px red;
contain: paint;
}
.e11 div{
width: 100px;
height: 200px;
border: dotted 2px red;
position: fixed;
right: 4px;
top: 0;
}
-->
<div class="e11">
Hello World
<div>
Fixed right 4px
</div>
</div>
<p class="t">container</p>
<p>感觉就像是局部媒体查询，将某元素设置该属性，并配合查询器进行样式控制</p>
<!--
.e12{
resize: horizontal;
overflow: auto;
border: solid 1px red;
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (max-width: 400px) {
p {
color: red;
font-size:20px !important
}
}
-->
<div class="e12">
<p>
This is a static template, there is no bundler or bundling involved!
</p>
</div>
<p class="t">content</p>
<p>常用于伪元素::before ::after 为其插入内容</p>
<p class="t">counter-*</p>
<p>counter-reset重置计数器的值，默认为1</p>
<p>counter-increment将计数器递增 默认为1</p>
<p>在父元素设置计数器，其子元素则可以使用</p>
<!--
.e13{
counter-reset: section;
}
.e13 p::before{
counter-increment: section;
content:counter(section) "."
}
-->
<div class="e13">
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</div>
样式
.e1{
width: 50px;
height: 50px;
appearance:button;
border: solid 1px #ddd;
}
.e2{
height: 100px;
background: pink;
aspect-ratio: 16/9;
}
.e3{
accent-color: red;
}
.e4{
width: 100%;
height: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
background: rgb(255 255 255 / 0.3);
}
.e5{
width: 50px;
height: 100px;
background: pink;
backface-visibility: hidden;
transition: transform 1s;
}
.e5:hover{
transform: rotateY(180deg);
}
.e6{
block-size: 100px;
writing-mode: vertical-rl;
background: pink;
}
.e7 {
column-count:3;
column-rule:2px dotted olivedrab;
break-inside: avoid-column;
} .
e7 hr {
break-after:column;
}
.e8{
clip-path: circle(40%);
width: 200px;
height: 200px;
}
.e9{
height: 400px;
border: solid 1px black;
column-count: 3;
column-fill: balance;
column-gap: 10px;
column-rule:dotted 3px red;
}
.e9 .span{
padding: 10px;
background: pink;
column-span: all;
}
.e10{ columns: 3;}
.e11{
width: 200px;
height: 100px;
border: dotted 2px red;
contain: paint;
}
.e11 div{
width: 100px;
height: 200px;
border: dotted 2px red;
position: fixed;
right: 4px;
top: 0;
}
.e12{
resize: horizontal;
overflow: auto;
border: solid 1px red;
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (max-width: 400px) {
p {
color: red;
font-size:20px !important
}
}
.e13{
counter-reset: section;
}
.e13 p::before{
counter-increment: section;
content:counter(section) "."
}
.red{
color: red;
}
p{
font-size: 14px;
}
.t{
color: red;
font-weight: bold;
font-size: 20px;
margin-top: 10px;
}
实在是太多了
会分好几篇来熟悉这些属性
欢迎各位留言，写出自己对CSS的独特见解、各种骚操作。
感觉CSS就是看谁脑洞大～～
