CSS 属性 补充

deepCode
154 阅读8分钟

换行控制 word-break和word-wrap

参考文章

文字竖向排列

方法一：

<div class="box">竖向排列</div>
<style>
    .box {
      width: 20px;
      margin: 0 auto;
      line-height: 24px;
      font-size: 20px;
    }
</style>

方法二：

<div class="box">竖向排列</div>
<style>
    .box {
      width: 100px;
      writing-mode: vertical-lr;
    }
</style>

动画下划线效果

7777.gif

<div class="title">
    <span>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</span>
</div>
<style>
    .title{
      width: 500px;
      line-height: 2;
    }
    .title span{
      font-size: 50px;
      background: linear-gradient(to right, pink, green) no-repeat right bottom;
      background-size: 0 5px;
      transition: background-size 1300ms;
      padding: 0 0 10px 0;
    }
    .title span:hover{
      background-position-x: left;
      background-size: 100% 5px;
    }
</style>

制作网格容器

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      grid-template-columns: auto auto auto; // 3个auto表示3列
      display: grid;
      gap: 100px;
    }
    .box div{
      width: 100px;
      height: 100px;
      background-color: #3ff;
    }
  </style>

文字混合

2.png

这种方法只能引入图片类型gif图也可以

  <h1>标题标题标题标题标题</h1>
  <style>
    h1{
      font-size: 100px;
      background: url('./1.png') no-repeat;
      background-size: 100% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
视频文字混合
  <div class="box">
    <video src="./33.mp4" loop autoplay muted></video>
    <span>标题标题标题标题标题</span>
  </div>
  <style>
    .box {
      width: 500px;
      height: 200px;
      position: relative;
      margin: 100px auto;
    }

    video {
      width: 500px;
      height: 200px;
    }
    span{
      width: 500px;
      height: 200px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
      position: absolute;
      left: 0;
      top: 0;
      mix-blend-mode: screen;
    }
  </style>
aspect-ratio

无论窗口怎么变化元素永远按照比例缩放

  <div></div>
  <style>
    div{
      width: 100%; //只能定义宽度生效
      background-color: #bfa;
      aspect-ratio: 1920 / 900;
    }
  </style>

文字倒影

只能用于块元素

  <span>文字倒影</span>
  <style>
    span{
      display: block;
      -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 35%, rgba(255,255,255,.6));
    }
  </style>

文字环绕图片

  <div class="box">
    <span class="one"></span>
    <span class="two">
      别爱我，没结果，除非花手摇过我。别爱我，没结果，除非花手摇过我。别爱我，没结果，除非花手摇过我。别爱我，没结果，除非花手摇过我。别爱我，没结果，除非花手摇过我。别爱我，没结果，除非花手摇过我。别爱我，没结果，除非花手摇过我。
    </span>
  </div>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #bfa;
    }
    .one{
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
      float: left;
      shape-outside: circle();
      clip-path: circle();
    }
  </style>

backdrop-filter 和 filter

filter 属性详解 filter 属性定义了元素(通常是< img >)的可视效果(例如：模糊与饱和度)。作用于元素本身 backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素。它最常用的功能就是毛玻璃效果

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
backdrop-filter它在写法上略有不同，不能直接作用于元素

backdrop-filter 属性详解 backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

/* 还可以指向 SVG 滤镜的 URL */  
backdrop-filter: url(commonfilters.svg#filter);

原图

image.png

滤镜名称方法案例效果
blur()模糊blur(5px)1.png
brightness()亮度brightness(1.4)image.png
contrast()对比度contrast(2)image.png
drop-shadow()投影drop-shadow(4px 4px 8px #fff)与box-shadow大同小异, 可以让任意的图形区域，只要是非透明的都能产生投影效果
grayscale()灰度grayscale(60%)image.png
hue-rotate()色调变化hue-rotate(66deg)
invert()反向invert(60%)image.png
opacity()透明度opacity(50%)效果类似于background-color: rgba(x,x, x, x)
saturate()饱和度saturate(250%)image.png
sepia()褐色sepia(70%)image.png

下面运用一个例子来对比效果

  • filter
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container { width: 850px; }
        img { width: 200px; height: 200px; }
        .none { filter: none; }
        /* 给图像设置高斯模糊, 值越大越模糊, 不接受百分比值 */
        .blur { filter: blur(4px); }
        /* 给图片应用一种线性乘法，使其看起来更亮或更暗 */
        .brightness { filter: brightness(0.3); }
        /* 调整图像的对比度 */
        .contrast { filter: contrast(180%); }
        /* 将图像转换为灰度图像 */
        .grayscale { filter: grayscale(100%); }
        /* 给图像应用色相旋转, 该值虽然没有最大值，超过360deg的值相当于又绕一圈 */
        .huerotate { filter: hue-rotate(180deg); }
        /* 反转输入图像 */
        .invert { filter: invert(100%); }
        /* 转化图像的透明程度 */
        .opacity { filter: opacity(50%); }
        /* 转换图像饱和度 */
        .saturate { filter: saturate(7); }
        /* 将图像转换为深褐色 */
        .sepia { filter: sepia(100%); }
        /* 给图像设置阴影 */
        .shadow { filter: drop-shadow(8px 8px 10px green); }
    </style>
</head>
<body>
    <div class="container">
        <img src="./1.png" class="none">
        <img src="./1.png" class="blur">
        <img src="./1.png" class="brightness">
        <img src="./1.png" class="contrast">
        <img src="./1.png" class="grayscale">
        <img src="./1.png" class="huerotate">
        <img src="./1.png" class="invert">
        <img src="./1.png" class="opacity">
        <img src="./1.png" class="saturate">
        <img src="./1.png" class="sepia">
        <img src="./1.png" class="shadow">
    </div>
</body>
</html>

image.png

  • backdrop-filter
    它在写法上略有不同，不能直接作用于元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 850px;
        }
        .container {
            width: 200px;
            height: 200px;
            display: inline-block;
            line-height: 200px;
            text-align: center;
            font-size: 30px;
            position: relative;
            background: url(./1.png);
            background-size: 100% 100%;
        }
        .container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
        .blur::before { backdrop-filter: blur(4px); }
        /* 给图片应用一种线性乘法，使其看起来更亮或更暗 */
        .brightness::before { backdrop-filter: brightness(0.3); }
        /* 调整图像的对比度 */
        .contrast::before { backdrop-filter: contrast(180%); }
        /* 将图像转换为灰度图像 */
        .grayscale::before { backdrop-filter: grayscale(100%); }
        /* 给图像应用色相旋转, 该值虽然没有最大值，超过360deg的值相当于又绕一圈 */
        .huerotate::before { backdrop-filter: hue-rotate(180deg); }
        /* 反转输入图像 */
        .invert::before { backdrop-filter: invert(100%); }
        /* 转化图像的透明程度 */
        .opacity::before { backdrop-filter: opacity(50%); }
        /* 转换图像饱和度 */
        .saturate::before { backdrop-filter: saturate(7); }
        /* 将图像转换为深褐色 */
        .sepia::before { backdrop-filter: sepia(100%); }
        /* 给图像设置阴影 */
        .shadow::before { backdrop-filter: drop-shadow(8px 8px 10px green); }
    </style>
</head>
<body>
    <div class="container none">none</div>
    <div class="container blur">blur</div>
    <div class="container brightness">brightness</div>
    <div class="container contrast">contrast</div>
    <div class="container grayscale">grayscale</div>
    <div class="container huerotate">huerotate</div>
    <div class="container invert">invert</div>
    <div class="container opacity">opacity</div>
    <div class="container saturate">saturate</div>
    <div class="container sepia">sepia</div>
    <div class="container shadow">shadow</div>
</body>
</html>

image.png

那么我们再写一个例子来谈谈filter以及backdrop-filter的不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 400px;
            background: url(./2.png) no-repeat;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .container > div {
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, .7);
            text-align: center;
            line-height: 200px;
            font-size: 20px;
        }
        .filter {
            filter: blur(6px);
        }
        .backdrop-filter {
            backdrop-filter: blur(6px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Normal</div>
        <div class="filter">filter</div>
        <div class="backdrop-filter">backdrop-filter</div>
    </div>
</body>
</html>

image.png

所以，filter 作用于当前元素，并且它的后代元素也会继承这个属性；backdrop-filter 作用于元素背后的所有元素。

  • 复合函数：使用多个滤镜，每个滤镜使用空格分隔。
tips: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img { width: 200px; height: 200px; }
        .none { filter: none; }
        /* backdrop-filter也是一样的 */
        /* 给图片应用一种线性乘法，使其看起来更亮或更暗 */
        .brightness { filter: brightness(150%); }
        /* 调整图像的对比度 */
        .contrast { filter: contrast(200%); }
        .more1 { filter: contrast(200%) brightness(150%); }
        .more2 { filter: brightness(150%) contrast(200%); }
    </style>
</head>
<body>
    <div class="container">
        <img src="./1.png" class="none">
        <img src="./1.png" class="brightness">
        <img src="./1.png" class="contrast">
        <img src="./1.png" class="more1">
        <img src="./1.png" class="more2">
    </div>
</body>
</html>

image.png

最后，有两个他们的相同点，同样也是需要注意的点:

使用了 filter 和 backdrop-filter 的元素（值不为 none）会使 CSS 3D 失效  
使用了 filter 和 backdrop-filter 的元素（值不为 none）会使内部的 fixed 定位失效

text-align-last

可实现效果如下

微信图片_20231218211020.jpg

cqw和cqh单位

cqw是相对查询容器宽度设置字体大小，同理cqh就是相对容器高度

<body>
<div class="item">
  <p>内容</p>
</div>
<style>
  .item {
    width: 500px;
    height: 600px;
    background-color: #bfa;
    container-type: size;
  }
  p {
    font-size: 10cqw;
  }
</style>
</body>

手电筒效果

  <body>
    <div class="item">
      <p>
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内 容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容容内容内容内容内容内容
      </p>
    </div>
    <style>
      .item {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle 50px at 35px 35px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        animation: move 1.6s linear infinite;
      }
      @keyframes move {
        0% {
          background: radial-gradient(circle 50px at 135px 135px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        }
        50% {
          background: radial-gradient(circle 50px at 185px 180px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        }
        100% {
          background: radial-gradient(circle 50px at 235px 235px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 
        }
      }
    </style>
  </body>
avatar
文章
阅读
粉丝