小众但非常实用的 CSS 属性
元素倒影 -webkit-box-reflect
-webkit-box-reflect 是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性能够增强网页的视觉效果，使元素呈现出更加立体和生动的感觉。
-webkit-box-reflect 的基本语法结构为：-webkit-box-reflect: [direction] [offset] [mask-image];
- direction：指定倒影的方向，可以是 below（下方）、above（上方）、left（左侧）或 right（右侧）。
- offset：倒影与元素之间的距离，可以使用像素(px)、百分比(%)等单位。这个参数决定了倒影与原始元素之间的间隔大小。
- mask-image：（可选）一个图像，用于创建倒影的遮罩效果。如果未指定，倒影将是不透明的。通过遮罩图像，可以实现更加复杂的倒影效果，如渐变透明度等。
html
<style>
.outer {
width: 500px;
height: 250px;
background-color: #f0f0f0;
margin: auto;
padding: 20px;
}
.inner {
width: 100px;
height: 100px;
background-color: #f40;
margin: auto;
-webkit-box-reflect: below 10px linear-gradient(transparent, black);
}
</style>
<div class="outer">
<div class="inner"></div>
</div>元素背面是否可见 backface-visibility
backface-visibility 是一个 CSS 属性，用于控制元素的背面是否可见。它主要用于在进行 3D 转换时控制元素的背面可见性
当我们对一个元素应用 3D 转换（例如旋转或倾斜）时，默认情况下，元素的背面是不可见的，即不会显示在屏幕上。这是因为浏览器默认会进行背面剪裁（backface culling），以提高性能和减少不必要的渲染。但有时候，我们可能需要让元素的背面可见，这时就可以使用 backface-visibility 属性来控制。
backface-visibility 属性有两个可能的值：
- visible：表示元素的背面可见。背面将正常渲染并显示在屏幕上。
- hidden：表示元素的背面不可见。背面将被隐藏，不会显示在屏幕上（这是默认值）
html
<style>
.card {
width: 320px;
height: 200px;
border-radius: 10px;
perspective: 1000px;
margin: auto;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 10px;
transition: transform 600ms ease;
transform-style: preserve-3d;
box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.2);
}
.card-front,
.card-back {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
backface-visibility: hidden; /* 背面隐藏*/
background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);
}
.card-front {
border-radius: 10px;
overflow: hidden;
position: relative;
transition: transform 300ms ease-in-out;
}
.card-back {
transform: rotateY(180deg);
}
.card-back::before {
content: '';
position: absolute;
top: 40%;
left: 20%;
width: 180%;
height: 120%;
border-radius: 100%;
background-image: linear-gradient(to right top, #a3d4e7, #a7d5e6, #abd5e4, #aed6e3, #b2d6e2, #aed4e2, #abd3e1, #a7d1e1, #9bcee1, #8ecae1, #81c7e1, #73c3e1);
filter: blur(10px);
opacity: 0.15;
}
.card-back::after {
content: '';
position: absolute;
top: 15%;
width: 100%;
height: 40px;
background-image: linear-gradient(to right top, #021318, #07191f, #0a1f26, #0b262e, #0c2c35, #0c2c35, #0c2c35, #0c2c35, #0b262e, #0a1f26, #07191f, #021318);
}
.card-bg {
position: absolute;
top: -20px;
right: -120px;
width: 380px;
height: 250px;
background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);
border-top-left-radius: 100%;
}
.card-bg::before {
content: '';
position: absolute;
top: -20px;
right: -80px;
width: 380px;
height: 250px;
background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);
border-top-left-radius: 100%;
}
.card-bg::after {
content: '';
position: absolute;
top: -20px;
right: -120px;
width: 380px;
height: 250px;
background: linear-gradient(321.03deg, #01adef 0%, #0860bf 91.45%);
border-top-left-radius: 100%;
}
.card-glow {
position: absolute;
top: -140px;
left: -65px;
height: 200px;
width: 400px;
background: rgba(0, 183, 255, 0.4);
filter: blur(10px);
border-radius: 100%;
transform: skew(-15deg, -15deg);
}
.card-contactless {
position: absolute;
right: 15px;
top: 55px;
transform: scale(0.5);
}
.card-chip {
position: absolute;
top: 65px;
left: 25px;
width: 45px;
height: 34px;
border-radius: 5px;
background-color: #ffda7b;
overflow: hidden;
}
.card-chip::before {
content: '';
position: absolute;
left: 49%;
top: -7%;
transform: translateX(-50%);
background: #ffda7b;
border: 1px solid #a27c1f;
width: 25%;
height: 110%;
border-radius: 100%;
z-index: 2;
}
.card-chip::after {
content: '';
position: absolute;
top: 30%;
left: -10%;
background: transparent;
border: 1px solid #a27c1f;
width: 120%;
height: 33%;
}
.card-holder {
position: absolute;
left: 25px;
bottom: 30px;
color: white;
font-size: 14px;
letter-spacing: 0.2em;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}
.card-number {
position: absolute;
left: 25px;
bottom: 65px;
color: white;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.2em;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}
.card-valid {
position: absolute;
right: 25px;
bottom: 30px;
color: white;
font-size: 14px;
letter-spacing: 0.2em;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}
.card-valid::before {
content: 'WEB DEV';
position: absolute;
top: 1px;
left: -45px;
width: 50px;
font-size: 7px;
}
.card-signature {
position: absolute;
top: 120px;
left: 15px;
width: 70%;
height: 30px;
background: #eeecec;
display: flex;
justify-content: center;
align-items: center;
color: #021318;
font-family: 'Mr Dafoe', cursive;
font-size: 38px;
font-weight: 400;
}
.card-signature::before {
content: 'Authorized Signature';
position: absolute;
top: -15px;
left: 0;
font-family: 'Overpass Mono', monospace;
font-size: 9px;
color: #eeecec;
}
.card-seccode {
position: absolute;
top: 125px;
left: 245px;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 17px;
color: #021318;
background-color: #eeecec;
text-align: center;
font-size: 11px;
}
.logo {
position: absolute;
right: 25px;
top: 30px;
}
.hint {
padding: 2em 0;
font-family: 'Noto Sans KR', sans-serif;
letter-spacing: 0.025em;
font-weight: 400;
color: #a3d4e7;
}
</style>
<div class="card">
<div class="card-inner">
<div class="card-front">
<div class="card-bg"></div>
<div class="card-glow"></div>
<svg width="72" height="24" viewBox="0 0 72 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="logo">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M52.3973 1.01093L51.5588 5.99054C49.0448 4.56717 43.3231 4.23041 43.3231 6.85138C43.3231 7.89285 44.6177 8.60913 46.178 9.47241C48.5444 10.7817 51.5221 12.4291 51.5221 16.062C51.5221 21.8665 45.4731 24 41.4645 24C37.4558 24 34.8325 22.6901 34.8325 22.6901L35.7065 17.4848C38.1115 19.4688 45.4001 20.032 45.4001 16.8863C45.4001 15.5645 43.9656 14.785 42.3019 13.8811C40.0061 12.6336 37.2742 11.1491 37.2742 7.67563C37.2742 1.30988 44.1978 0 47.1132 0C49.8102 0 52.3973 1.01093 52.3973 1.01093ZM66.6055 23.6006H72L67.2966 0.414276H62.5732C60.3923 0.414276 59.8612 2.14215 59.8612 2.14215L51.0996 23.6006H57.2234L58.4481 20.1566H65.9167L66.6055 23.6006ZM60.1406 15.399L63.2275 6.72235L64.9642 15.399H60.1406ZM14.7942 16.3622L20.3951 0.414917H26.7181L17.371 23.6012H11.2498L6.14551 3.45825C2.83215 1.41281 0 0.807495 0 0.807495L0.108643 0.414917H9.36816C11.9161 0.414917 12.1552 2.50314 12.1552 2.50314L14.1313 12.9281L14.132 12.9294L14.7942 16.3622ZM25.3376 23.6006H31.2126L34.8851 0.414917H29.0095L25.3376 23.6006Z"
fill="white" />
</svg>
<div class="card-contactless">
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="56">
<path
fill="none"
stroke="#f9f9f9"
stroke-width="6"
stroke-linecap="round"
d="m35,3a50,50 0 0,1 0,50M24,8.5a39,39 0 0,1 0,39M13.5,13.55a28.2,28.5
0 0,1 0,28.5M3,19a18,17 0 0,1 0,18" />
</svg>
</div>
<div class="card-chip"></div>
<div class="card-holder">webDev</div>
<div class="card-number">1234 5678 9000 1234</div>
<div class="card-valid">12/24</div>
</div>
<div class="card-back">
<div class="card-signature">webdev</div>
<div class="card-seccode">123</div>
</div>
</div>
</div>不规则的文字环绕 shape-outside
shape-outside 的 CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
css
/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url> 值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;
html
<style>
img {
float: left;
shape-outside: circle(50%); /* 50% of the element's width */
padding: 5px;
border-radius: 50%;
}
</style>
<img src="https://picsum.photos/id/238/200/200.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed
blandit ligula non leo cursus, vitae eleifend nisl molestie. Nulla quis ligula at mauris rhoncus vestibulum. Maecenas at nulla ipsum. Donec rutrum congue leo at malesuada. Integer auctor tristique
sem, vitae lacinia sem sagittis sed. Nullam auctor, enim nec pellentesque aliquam, arcu dui lacinia mauris, id lobortis enim odio id felis.
</p>行盒的截断样式 box-decoration-break
box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。
css
/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;
/* Global values */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;
html
<style>
.content {
width: 600px;
margin: 0 auto;
line-height: 2;
}
.highlight {
background: linear-gradient(#d5e8b7, #bad6b3);
border: 1px solid #7e876b;
padding: 0 4px;
border-radius: 5px;
}
.word-wrap {
box-decoration-break: clone;
}
</style>
<div class="content">
<p>
<span class="highlight">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident quidem fugiat architecto. Hic blanditiis laborum culpa fuga quia neque eum,</span> repellat tenetur
voluptatum inventore numquam aspernatur totam eveniet quae qui!
</p>
<p>
<span class="highlight word-wrap">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident quidem fugiat architecto. Hic blanditiis laborum culpa fuga quia neque eum,</span>
repellat tenetur voluptatum inventore numquam aspernatur totam eveniet quae qui!
</p>
</div>