02 CSS技巧

clip-path

自定义形状，或者使用自带的属性画圆等circle

HTML结构

html 复制代码

<body>
	<div class="container"></div>
</body>

CSS结构

使用*polygon*自定义形状

css 复制代码

.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结构

html 复制代码

<body>
    <div class="frame">
      <div class="shape"></div>
    </div>
</body>

CSS结构

使用3D效果，perspective需要卸载父类中，用来规定视口距离

css 复制代码

.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结构

html 复制代码

  <body>
    <div class="plaer"></div>
  </body>

CSS结构

使用aspect-ratio等比例缩放格式为分数形式

css 复制代码

/* 不要高度，等比例缩放 */
.plaer {
  width: 100%;
  background-color: lightblue;
  aspect-ratio: 16/9;
}

04 filter

HTML结构

html 复制代码

  <body>
    <img class="pic1" src="./cosplay.jpg" />
    <img class="pic2" src="./cosplay.jpg" />
    <p class="spoiler">一段话。。。。 </p>
  </body>

CSS结构

设置模糊度blur

设置对比度*saturate*

亮度brightness

css 复制代码

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结构

html 复制代码

  <body>
    <input type="text" placeholder="搜索。。。" />
  </body>

CSS结构

placeholder设置placeholder

focus当获取焦点时触发

caret-color光标颜色

css 复制代码

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结构

html 复制代码

  <body>
    <div class="item">
      <h1>哈哈哈哈哈</h1>
      <h2>呵呵呵呵呵</h2>
      <h4>拉拉阿拉啦</h4>
      <p>placeholderplaceholderplaceholderplaceholder</p>
    </div>
  </body>

CSS结构

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结构

html 复制代码

  <body>
    <video src="./1_01-尚优选项目简介_高清 1080P.mp4" controls>
      <track kind="captions" label="en" src="./01-尚优选项目简介.ass" />
    </video>
  </body>

CSS结构

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结构

css 复制代码

video {
  width: 100%;
  aspect-ratio: 16/9;
}

/* 设置字母样式 */
::cue {
  background-color: black;
  font-size: 50px;
}