每天一个CSS小技巧 - 不规则投影（不规则图形怎么放样）

liuian 2025-02-03 13:58 23 浏览

当我们想给一个矩形或者其他能用border-radius生成的形状加投影时，box-shadow的表现都很棒的。但是，当元素添加可一些伪元素或半透明的装饰之后，border-radius会无视这些。

这是原本的图形：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    div{
      position: relative;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      vertical-align: bottom;
      box-sizing: border-box;
      width: 5.9em;
      height: 5.2em;
      margin: .6em;
      background: #fb3;
      font: 200%/1.6 Baskerville, Palatino, serif;
      text-align: center;
      
    }

    .speech{
      border-radius: .3em;
    }

    .speech:before{
      content: '';
      position: absolute;
      top: 1em;
      right: -.7em;
      width: 0;
      height: 0;
      border: 1em solid transparent;
      border-left-color: #fb3;
      border-right-width: 0;
    }

    .dotted{
      background: transparent;
      border: .3em dotted #fb3;
    }

    .cutout {
      border: .5em solid #58a;
      border-image: 1 url('data:image/svg+xml,\
	                     <svg xmlns="http://www.w3.org/2000/svg"\
		                 width="3" height="3" fill="%23fb3">\
		     	         <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
		     	</svg>');
      background-clip: padding-box;
    }

  </style>

</head>
<body>
  <div class="speech">Speech bubble</div>
  <div class="dotted">Dotted border</div>
  <div class="cutout">Cutout corners</div>
</body>
</html>

当我们直接使用box-shadow时：

      box-shadow: 2px 2px 10px rgba(0,0,0,.5);

就会变成这样：

解决方案

这里我们引入一个叫filter的属性。是一个滤镜，只需要一些函数就可以很方便的制定滤镜效果。比如blur()、grayscale()以及我们需要的drop-shadow()。我们甚至可以把多个滤镜串联起来：

filter: blur() grayscale() drop-shadow();

drop-shadow()滤镜可接受的基本参数跟box-shadow属性一样，但不包括扩张半径，不包括inset关键字，也不支持逗号分割的多层投影语法，所以我们这里把之前的box-shadow换成：

      /*box-shadow: 2px 2px 10px rgba(0,0,0,.5);*/
      filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

display:inline-flex

上一篇：Cube 技术解读 | Cube 小程序技术详解
下一篇：非常强大的 CSS 选择器 :has()（css选择器介绍）

每天一个CSS小技巧 - 不规则投影（不规则图形怎么放样）

解决方案

相关推荐

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

每天一个CSS小技巧 - 不规则投影（不规则图形怎么放样）

解决方案

相关推荐

【验证码逆向专栏】vaptcha 手势验证码逆向分析

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

10款高性能NAS丨双十一必看，轻松搞定虚拟机、Docker、软路由

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄