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;
}
