前言：
目前同学们对“css文字投射”大致比较注意，我们都需要知道一些“css文字投射”的相关知识。那么小编同时在网络上汇集了一些对于“css文字投射””的相关知识，希望同学们能喜欢，姐妹们一起来学习一下吧！当我们想给一个矩形或者其他能用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=";\ 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文字投射
