02 CSS技巧
02 CSS技巧
clip-path
自定义形状，或者使用自带的属性画圆等circle
HTML结构
<body><div class="container"></div>
</body>
CSS结构
使用*polygon*自定义形状
.container {width: 300px;height: 300px;background-color: rebeccapurple;/* clip-path: polygon(13% 22%, 11% 59%, 54% 71%,12% 54%); */clip-path: circle(10%);transition: all 2s ease;
}
.container:hover {clip-path: circle(100%);
}
## 02 perspective
HTML结构
<body><div class="frame"><div class="shape"></div></div>
</body>
CSS结构
使用3D效果，perspective需要卸载父类中，用来规定视口距离
.frame {margin: 0 auto;width: 300px;height: 300px;border: 3px solid rebeccapurple;perspective: 500px;
}
.shape {width: 300px;height: 300px;background-color: lightblue;transform: rotateX(45deg);
}
03 aspect-ratio
HTML结构
<body><div class="plaer"></div></body>
CSS结构
使用aspect-ratio等比例缩放格式为分数形式
/* 不要高度，等比例缩放 */
.plaer {width: 100%;background-color: lightblue;aspect-ratio: 16/9;
}
04 filter
HTML结构
<body><img class="pic1" src="./cosplay.jpg" /><img class="pic2" src="./cosplay.jpg" /><p class="spoiler">一段话。。。。 </p></body>
CSS结构
设置模糊度blur
设置对比度*saturate*
亮度brightness
img {user-select: none;
}.pic1 {margin: 0 auto;width: 300px;height: 300px;/* 设置模糊度-blur */filter: blur(10px);
}
.pic1:active {filter: none;
}.pic2 {margin: 0 auto;width: 300px;height: 300px;/* 设置对比度、曝光、灰度 *//* filter: saturate(20); *//* filter: brightness(20%); */filter: grayscale(100%);transition: all 2s ease;
}
.pic2:active {filter: none;
}.spoiler {user-select: none;filter: blur(20px);
}.spoiler:active {filter: none;
}
05 input输入设置
HTML结构
<body><input type="text" placeholder="搜索。。。" /></body>
CSS结构
placeholder设置placeholder
focus当获取焦点时触发
caret-color光标颜色
input {padding: 20px;border: 1px solid red;/* 设置光标颜色 */caret-color: red;
}/* 当输入框获取焦点时，外边框设置红色 */
input:focus {outline: 1px solid red;
}/* 设置 placeholder */
input::placeholder {color: red;
}
06 is、where、not等用法
HTML结构
<body><div class="item"><h1>哈哈哈哈哈</h1><h2>呵呵呵呵呵</h2><h4>拉拉阿拉啦</h4><p>placeholderplaceholderplaceholderplaceholder</p></div></body>
CSS结构
/* 如果想批量修改颜色，注意：类名后要有一个空格 */
.item :where(h1, h2, p) {color: red;
}/* is 的优先级要高于where */
.item :is(h1, h2, p) {color: blue;
}.item :not(h2, h4) {color: yellow;
}
07 字幕设置
HTML结构
<body><video src="./1_01-尚优选项目简介_高清 1080P.mp4" controls><track kind="captions" label="en" src="./01-尚优选项目简介.ass" /></video></body>
CSS结构
video {width: 100%;aspect-ratio: 16/9;
}/* 设置字母样式 */
::cue {background-color: black;font-size: 50px;
}
<track kind="captions" label="en" src="./01-尚优选项目简介.ass" />
</video>
CSS结构
video {width: 100%;aspect-ratio: 16/9;
}/* 设置字母样式 */
::cue {background-color: black;font-size: 50px;
}