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 CSS技巧_第1张图片## 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);
}

02 CSS技巧_第2张图片

03 aspect-ratio

HTML结构

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

CSS结构

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

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

02 CSS技巧_第3张图片

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

02 CSS技巧_第4张图片

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

~~~

CSS结构

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

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

你可能感兴趣的:(CSS技巧,css,前端)