网站首页 > 技术文章正文

每天一个CSS小技巧 - 不规则投影

nanyue 2025-05-26 17:53:02 技术文章 79 ℃

当我们想给一个矩形或者其他能用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));

上一篇： CSS必知|重点属性flex|实践技巧|温故知新
下一篇：【HarmonyOS Next之旅】兼容JS的类Web开发 -＞常见组件(一)

网站首页 > 技术文章 正文

每天一个CSS小技巧 - 不规则投影

解决方案

猜你喜欢

网站首页 > 技术文章正文