CSS filter
.logo1 {
/* 设置阴影 */
filter: drop-shadow(1px 1px 10px #333);
}
.title {
/* 设置模糊度,值越大,越模糊*/
filter: blur(1px);
}
.logo2 {
/* 设置对比度,值越大,对比度越大 */
filter: contrast(10);
}
.logo3 {
/* 设置制灰程度,常用于一些特殊日子 */
filter: grayscale(1);
}
CSS focus-within
<div class="form-group">
<label for="login-email">Email</label>
<input
type="email"
id="login-email"
class="form-control"
placeholder="Email"
data-required
/>
</div>
.form-group:focus-within {
/* 当前元素以及它的后代元素如果聚焦,则给它增加背景颜色 */
background: #eee;
}
CSS :has()
/* 表示:form-group下面的label的兄弟元素中,如果包含属性data-required,则给label增加红色星号,表示必填 */
.form-group label:has(+ input[data-required])::after {
content: "*";
color: red;
}
CSS aspect-ratio
.item {
background: #f40;
width: 400px;
margin: 0 auto;
/* 保持元素宽高比 */
aspect-ratio: 4/3;
}
利用弹性盒布局+margin+变量来实现下图效果
ol {
padding: 10px;
background: #eee;
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
}
ol li {
margin: 10px;
width: 64px;
height: 64px;
text-align: center;
line-height: 64px;
background: pink;
border: 3px solid #333;
--n: 6;
--space: calc(100% - var(--n) * 50px);
--h: calc(var(--space) / var(--n) / 2);
margin: 10px var(--h);
}
CSS vmin
需求:图片全屏展示,不能出现滚动条
img{
/* vmin:取视口最短边 */
/* vmax:取 视口最长边*/
width: 100vmin;
height: 100vmin;
}
CSS fit-content
<div class="text">
<span>2023-05-10</span