Appearance
CSS部分属性记录
元素盒子裁剪
clip-path
可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。
相关文章 and 相关文章2
html
<style>
.outer{
width:100px;
height: 100px;
background:orange;
clip-path: polygon(`50% 0%`, `0% 100%`, `100% 100%`);
}
</style>
<div class='outer'></div>
实现不规则的图文环绕效果
shape-shadow
html
<style>
.shape {
float: left;
width: 60px; height: 60px;
padding: 10px; margin: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
color: #cd0000;
}
.margin-box {
shape-outside: circle();
}
</style>
<div class="container">
<span class="shape margin-box"></span>
<p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
<p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
</div>
图片内容轮廓阴影，只关注于内容
drop-shadow
图片内容轮廓阴影，只关注与内容，不像box-shadow关注于盒子
相关文章
html
<style>
div {
width: 200px;
height: 200px;
border-top: 5px solid #000;
border-radius: 50%;
box-shadow: 0 0 5px #000;
filter: drop-shadow(0 0 5px #000);
}
</style>
<div></div>
文字渐变色
html
<style>
div {
background-image:linear-gradient(yellow,red);
color:transparent;
background-clip:text
}
</style>
<div>这是一段渐变色的文字</div>