CSS提示：多色和镂空投影

来自菜鸟教程

跳转至：导航、搜索

盒子阴影很无聊。你听到了我的声音。它们一次只能使用一种颜色，并且动画或过渡很慢。你知道什么是整洁的吗？制作一个使用元素背景颜色的阴影。所以如果你的元素的左上角是红色的，那么阴影的左上角就是红色的。如果右下角为蓝色，则阴影的左下角为蓝色。那不是很整洁吗？太糟糕了，在 CSS 中没有办法做到这一点……哦等等，有。让我们开始吧。

方法

实际上，我们所要做的就是直接在父元素后面创建一个伪元素，并让它继承相关属性，例如 background 和 border-radius。然后我们添加一个 CSS blur() 过滤器。这将创建元素背景的第二个副本并将其模糊在元素后面。非常简单。通过继承背景和相关属性，我们不必重复指定它们。

更好的是，如果你想以某种方式动画/平滑/挤压阴影，你可以在伪元素上使用 CSS 转换和不透明度的全部功能！

有什么问题？ 在不支持 CSS 模糊滤镜的浏览器中不会显示阴影。

编码

/* The element that will have the blurred shadow. */
.fancy-box {
  /* We need to set the position value to something other than `static`
   * so that position: absolute for the pseudo-element will be relative
   * to this element. */
  position: relative;

  /* A nice Alligator.io-themed linear gradient. */
  /* This technique works with any and every background type. */
  background: linear-gradient(to bottom right, rgb(107,183,86), rgb(0,143,104));

  /* Whatever else you want in here. */
}

/* The shadow pseudo-element. */
.fancy-box::before {
  content: ' ';
  /* Position it behind the parent. */
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Inherit the background and border radius of the parent. */
  background: inherit;
  border-radius: inherit;

  /* Blur it for maximum shadowy-ness. */
  filter: blur(15px);

  /* Hide the shadow until the element is hovered over. */
  opacity: 0;
  transition: opacity 300ms;
}

/* Show the shadow on hover. */
.fancy-box:hover::before {
  opacity: 1;
}

结果

请注意它甚至如何处理透明图像！你终于可以制作形状阴影了！ 🎉

这是一个你可以玩的代码笔。

(function(){ document.addEventListener('DOMContentLoaded', () => { var styleEl = document.createElement('style'); styleEl.type = 'text/css'; styleEl.appendChild(document.createTextNode(` . article-demo .fancy-box-wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .article-demo .fancy-box { position: relative; display: block; height: 215px; width: 215px; 边距: 25px; 边框半径: 50px; } .article-demo .fancy-box::before { content: ; z-index: -1; position: absolute; top: 0; right: 0; bottom ：0；左：0；背景：继承；边框半径：继承；滤镜：模糊（15px）；不透明度：0；过渡：不透明度 300 毫秒；} .fancy-box:hover::before {不透明度：1；}。文章演示 .fancy-box.gradient { 背景：线性渐变（右下角，rgb（107,183,86），rgb（0,143,104））； } .article-demo .fancy-box.shape { 背景： url（' /images/logo-fancy.svg'); 背景尺寸: 封面; } .article-demo .fancy-box.image { 背景: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wB 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 bYkt+2/tNtttAJJAACSbbQAANttv/wD/ALbbb2gNsAl7aW2ZNkFqX6UlJJAAAAJJJJJttQW3bb+22222AAAJJtsgAG2//wD2222229tAbaBL21tuyTIDcl+lKSQJJJJJAAAASbbQlt223/8A/wD/AAASSbbIABt/+22222229tATbADe0ltWSJAT8n+paSAJJttpJJIAAAbaUts222222ySSbbIAk/8A9ttpJJJbbbYEk2AH9pbekkSQm5P9KUkATSSW222SSSAAG0lLZJttttu222SAJP8A7aSS22220kkBJNkAP6S37JAkpJmT+QtIAkl/bbbbbf8A7ZABbS1tskkkkrbJAAH/APtJLbbb/wD/APaSSTZIDfkk/wCkCSUkzJ/oG0ASftttttttttv2ACWlt7bbbbYAAAH/APyS23tJJJJJJJJkkgJPyS/pAElJImTfyVpAl/bbbaSSSSbbd9gAlpbf2222AAf/ AP0kt/SSSAJJJJJJJIST9kn/AEASWkkTZv5K2gCettpJbbbbbJJN+0ASUlttttu23/pJL/kgCSSSSSSSS0kk/ZJ/8AC20gCbt/ZG0AD1tJJLbbbbbbZJP2kASQkkkkn/APSST/5AEklJJJJJJJJJ+2yb/wAALbSANO21sibABfWkkttttv8A/bbZJO0kCSSQABJJJJ/+gCS0kkkkkkAAATbbNv8A0ANtIAk/ba2TNoAtvaSW22/7bbb/ANsknaSQJJJJJFt//wCgCWkkiSbbbbbbbbNtv7QA20gAT/ttbJm2AC3tJLbb9tttttv/AGSUtpJIAAAA/wD/AMACW0gSbbttttttttt/bQA20AAf/ tpbZt2QAW1pJbbftttttttv7JLW2kkkkkklJAAS20gTbttttttttpbbbAE22ACX9tpbbNuyAC29pJbb9tttttttv/ZJLW222220SSW2kgTdttrbbbbbbbbAEm2wAC39tJbbts2QAG2tJJbbtttttttt/wDy SS0kkkkstttJAE37b22222SabZJJNtkABt7aS23bbdkABNtaSS237bbbb+2bbb//AMkkgAAAACSQAJP+2ttt22SSSSTbZJAADb+0ltu223JIACba0kltv+2223tttk22/wD/AGSSSSSSEkkl/wC2ltu2ySbbJJJJAADbf2ktt2229JIADbbUkktt/wBttt7bbbbbNt//AP8Av9ttt5bf+20ltu22ZJJJJAACTbbWklt+229pJAATbbQkkttv/wBttvbbaSbbbNtv/wD/AP8A/wD/AG220ltt+2zZJJAASSbbbYkktv22/pJAASbbbAkkttv/ANttt7baAACbbbNtt/8A/wD+29ttttv22TJJICSTbbbIkktv+ 23pJAASbbbYEkttt/8A/tttvbaAAEgATbbNttttttvbf/tttvSSAEk22yQBJLb/ALbb0kgBJtttoCSW23//AG22229tsAACSSSBNttkkkkklm2222lpJACSbbZAAkt//wBttbSQEm222AAJbbf/ALbbbbbbW22AQJJJJJJE2222222222kkkkgBJJtsgASX/wD221ttACTbbYAAFtt/+2222221tttoECSbbbaSSSJttttttgAAAASSSTbZAAk//wDttLbbAEm22wABbbf/ALbbbf8A9tttttoEiTbbbbbbSSSRtttskiSSSSSbbZIAAn//ANtJbbbEk22yAALbf/tttv8A22222222ySBJttttttttJJJIAAAAtttttkkgAAH/AP8AtpLbbNkm22AABbb/ALbbb/22kAAAASSSQJJttttpNttttpJJJJJJAEkgAAAAB/8A/wBpJbbZtk22yAADbf8Abbbf22gAAABJJJJJJNttttJJJIJttttJJJJJAAAAABf/AP8A9tJLbbNsk22QAADb/wDbbb+22SQBJJNtttttttttpJJAAAABNttttttttttv/wD /AP8AbaS223bZJtsgAAElv7bbb22ySAJNtttttttt tttpIIAAAAAAAJtttttt/wD/AP8A/baSS2237ZJttkAAAkt/7bbe22ySBJttttttttttttpJAAASSQAAAABsltttbbaSSSS2237bJNtkgAAElt/bbbe22yQJNttttpJJJJJJJJJAASSSSSQAAAAAkkkk2222222/7bbdskgAAAkt/wC2223ttkkCTbbbSSSAAAAAAAAAAkkkkkkkkAAAAAJJJNttt/8A/ttt2ySQAACS2/ttttvbbZJAk2220kgABJJJIAABJJJJJLbbJJAAAAAASST/AP8A2222yZJJIAAJbb+22229tttkkgbbbbSQAEkkkkkkkkkkkltttttskAAAAAAAAG222yyAJJIAADbb+22229tttskkAbbbbSQAkkttttttttttttttttttkAAAAAJJJG22AAAJJIACTf8AttttrbbbbJJIA22220kAJJLbbbbbbbbbbbbbbbbbbZBJAACSSSRJAAASSS0kn3/ttt7bbbbJJIAG2222kkAJJbbbbbbbbbbbbbbbbbbbZJJIJTabSRIAAAAG22ll/wD7SS2222SSQANtttttpJASSW2222222222222222222ySSS222SSQTABJJJtt7b+2SS222SSAJttttttpJIASS22222ySSSSSW22222222ySSS22gAL/8A/wAkkkkkv/pLbJJbZIAkm222222kkgAJJLbbbbJJJJJJJJJf7bbbbbJJJbSQAG2/9tu2229trbZJbJLblkk222220kkgAJJJbbbbbJJJJJJJJJP/AP2/22ySSW0kAFtpbf8A/wAk/wC22yS2yW7btpJJtttJJAAASSSW22222SSSSbbbbbf/ AP8A/wD/AP0kktpIABJSb+2220kkkklsk/27SbaSbbYAAAAakkkltttttskkkk2222223/wD/AP8A/wDttCSQACSAWlv/APbSSSW22Tf/ADATaTaAJJIAkgEktttttttskkkk2222SST/AP8A/wD/ ANtt+SQASQCQG1t/ZJLbbZJt+02k0CQCQCSSIJJLbbbbbbbbbf8A/wD+2ySSf/8A/wD/AP222/bYAJIAJBKTe1tgANt223bSbAIJBAJABNkkklttttttttt//wD/AP8A/wD/AP8A/wD/AP7bbb//AKSBJABIBAbT+lpABP8Atsm2kSCQQTLZbJLbJJJJbbbfbbbbf/8A/wD/AP8A/wD/APtttt//AP7ZNkgAkAkEhtPyUgJttpJJsgEAy2Wff7 /bf/bbbbf+/wD/AP8A/wD/AP8A/wD/AP8Abbbbf/8A/wBtv/0kCSBbLZSm17KQm/8AttoAkgGS77777fb/AG//ANttttv/AP8A/wD/AP8A/wBttttv/wD/AO222/8Atk20ATZbJZWmlZCkv5ISSQATJ9/vvvvvv9/tv22kkktttttttttt/wD/ AP222/8A/wDSb/pJNoS2SyWVpqWFreyAAAkiT7fb75sFMNJpNtJJtttJLbbbbbf/AP8A9tt//wD7be2yS2tJNpS2SyWdJywNa2AJmiT/AG/2+IIJBBBBAJAJICSbbb//AP8A/wD+223/APtt/wD/AEkttkltSTbWslstzTcob1pCT2/+3/3wIIIJBBBBBAJABJJIASW2222//wDtt/8Abbf+SS2yS2yAtpfyWy7tOXpyUpb+bb/b8AgkJ77fb77fWySkgAEkkv8A/wD9ttv/ ALb/AO2/skltkltkhJSf2tl+aFnSsje0tP8At/ASCU99vv8Afb7/AH+3+0lJJIAH/wD/AP7bNrb/AG39kltkn/22toBa3+3yYszVsT8kBHtgJAIT331spBAITX+/+2//AIAAAJtv/wDJNpN/b+SW2TdtJP8A20JAb27TEublqXsASQJIBALX3lhAIJBBBBIBaX/+2wAAEk3/AMk2k3t/JbZC2kmSQB//AAEgMgmXp2VrWkpbAEgEpPeSkFNpvffEAgEgAt7bbIACSX/ZtJ/作者：WyQtJMkgAkk bf0AkA2dK2N6Qt//AABIDa/lgIbX2+/32+/0tABJK22QABtsm/2+lktkLSbJkn/+wAP+1sluzUtS9gS//wACSE1vZYUl9ZbKCDPt/t/pCSQNtkCSZJbJZLLQCUmwJP8A/bb/ALIG/wBv+k5K1rS1ttoS0m9rLQ09ZYSCCCAQCQv9tqSTf/2yADZLJQCAUm3Jf8gASTbsgSVu0jbk/IG//wDylpN7WShtWWEJpprsEgkgEvbfsk3/AOSRIBIJBDaX8l/SAJbbYAm7IAJAl6XtCS//APYk2l7LQ2rLCmvvvt9/ tbACSBttgAJNv0m02ml9vZK2gL//AP7ZIH/6C2zdsSEtbbbbtpPyWxtGSpp6yyy2b/b/AG1JIE22QAtv2/32+3loCbUm/wCSSZNkSftt/wBJ22BN/wD/AP8AJt6WStNyxNOWUEgkAkBt7b+kgDbZskgWyWSgkApL2zJAkkkgTYklbNtqSUtLbf8A/wAk35LQ2rZ0jLCm02ASACSEn/8A0kE//wDSBIBAIDS/0lLaAm237JG2JJSSNtgTb+2226WtktSYliYtjTa/2/2lJAAJb/8AySSb9t/t/v8Af7WkJI2//wC22zJ+0JJsklLSSf8A /wDbyS2SNJ2Vp2VJr/b/AG3/APtISSSft+SSQJf9/t+ASAm/ZMkgCT/sA/8ASSW2hJtpJMkkSS2QtK2dqWNp+WyS/wD223/9gAAW3/ZIAJIBIBID/wDpAkiSSQFvSEv7ZIA20k2QAABLbYm1LY2pUmtZCSAAW2/9ttpAABNv/wDaEkC2zb/aABN222QAv6AtrSElpJtoAkkk20BNqWxNyVJ6WgEkgABJtt//AP8ASQAJv/8A7b/7f/IAAN+22ySUla0pJttJJtoEkAC3kBNtS2puQtPyEgAkkkkAJJJLbf8ApJIAAbbSTbYAAA//ALbbpJaE /ZE2kkm2kSADftsm39paE35Wl7ASAEXSSSSSS2239ttCSSQACSQAAAf/ AP2kkgCWxNyXtJJtpMgAmbb/AP22lsCf0pa9gBIW29tpJJJJACSX/wD9IACSSAAABf8A/wDpJJJAFsTYl+yTbSZAJm3/APtLbaAm9pSl/YCVttv7bbJAAAASW3tt/wD22SCSS2//AP8AySSSQBbM2Jftu2kyATN/9siQAC29pSQv4AS1tt//AG2SSSQkkkBJ/wD+22239t//AP8A9skAkkgC3NgW7b/bEgET/bEkktvbb0kD/wAAJO23/wD/AP2SSSS0kAAlt7bbf/8A/wD/AP8A/bbJABJJAv2YBu2/25IJG /2JJG22/wDQAD/sCSNtv/8A/wD/ALJJJbbAASSEkv8A/wD/AP8AbbfttskgAkkC/bkE/b/aEglb7Ukg++wAAE/bYkgTb/8A/wD+/wD2SSW2yQEkAJNt/wC222227bbZJJJJAX+5AL2/+lIJW+xJAAAJJJu23ZIAk/8A/wD/APbb/kkltskBJAALbbbW2SSSSbbZJJJJAX +1IDe3/koDW+kJAJIkk22/bYAEt/8Askkk223JJLbJJSSAAS220kkkkkkm2ySSSUl/tCAG9v8AykN7+Qkgbbf/AP8A2kAJbbfkkkkkm22kNJbZJLSAASWW2kkkkkkkm2ySSUk/9KQE3tvJQmt7IST/AP8A+SSSANttkSSSSSSTbbSSGtskltAAJJJLaSSSSSSSLbJbSS/8lJCbe3kIT2tkJCSSSTJJNttskSSSSSSSbbaSS1tkktoAAJJJJbSSSSSSSLbaSS39khJSb2shSe1sALbJJJJttkkkCSSTSSSSTbbSSS/skltoEABJJJLaSSSSSSLaSS2/skpKSb1sKT2toJJJJEkkkkkkSSTbbSSSSTbbSST9skttskgABJJJZCSSSSaSSSS3tskBaTetjSf0tgEkkkkkkkkASTbbbbSSSSbbaSSXNkktttkkAAJJJJICSQLaSSSW3tskBaT0sbT/AJJJJJJJJJJAEm222222kkkkm22k kmzbJJbbbZJAASSSSW2220kkkktbbZC0npYml/ZJJJJJJbbSSS2222222kkkkm22kkm3bJJLbbbZIAASSSSSS220kktpLbZG0//AP8A9tv7bSSSSSTbbLbbbbbbbbbbaSSSSSSSSSSSTbbbbSQAAlttttttttmzaZkts/8A/wC3/wDpbbSSSSSbbZbbbbbbbbbbbbSSSSSSSSSSSSSTbbbaCAAEkkkkktt2bSJklm222/8A/wDlttJJJJNttlttttttttttttpJJJJJJJJJJJJJNtttskgAASASSW/ZtIE2bbbbbf8AbbbaSSSSTbbbbbbbbbbbbbbbbbbbbbbbbbbaSSSSTbbbZJJJJNkk/wAk2kBttttttv8AtttpJJJJtttttttttttttttttttttttttttttpJJJJIIAAAAkmyT/wCSbW2222222/bbbSSSSSTbbbbbbbbbbbbbbbbbbbe22237bbbbbbSSSQAAAAAJtk3/APv/AP7bbbbbJtttpJJJJJJJJttttttttttttt7bZJJbbbJJP9tttttttkkkkgAA23bb/wD/APtttttk2220kkkkkkkkkkk222222229tkktttttttttttk2222SSSSSSSAALbf/AP8A/wDttttsk222kkkkkkkkkkkkm222223tklttttttttttttttkkkkkgAAASSSQAD/AP8A/wD9ttttkm220kkkkkkkkkkkkm22221sktttttt//wD/AP2222222SSAJIAAAAAJJP8A/wD/AP8Attttsk2220kkkkkkkkkkkk22221skttttt/ /AP8A/wD/AP8A/wD/AP8A/wD7bbbaSSSQAAD/AP8A/wD/APbbbbZNtttpJJJJJJJJJJJJttttbJbbbbb/AP8A/wD/AP8A/wD/AP8A/wD/APttttttttpJJP8A/wD/AP8A9ttttsm2222222222kkkkkk2222sktttt/8A/wD/AP8A/wD/AP8A/wD/A P8A/wD+2kkkkkkkkv8A/wD/AP8A9ttttsk222222222220kkkkm222sktttt/8A/wD/AP8A2/bbbbbbbbbbbbSSSSSS/wD/AP8A/wD222222SfbbbbbbbbbbaSSSSbbbbSSW223/wD/AP8A92222222222222//ALbbbbZv/wD/AP8A9tttttklv22222222220kkkk2222kltlt/8A/wD/APttttttttttt/8A/wD/APbbbbZt/wD/AP8Attttttkkv22220kkk222kkkk2222kktltv8A /wD/ANttttttttt//wD/AP8Ab/7bJJJtt/8A7bbbbbbZJL9tttJJJJJtttJJJJtttpJLbLb/AP8A/wDbbbbbbbb/AP8A/wD23/6SSSSSbbbbbbbbbbbJJb9ttJJJJJJJttpJJJttttJJbJbf/wD+2222222//wD/AG3/AOkkm2kkkm2222222222yS37bbaSSSSSSbbaSSSbbbbSSSyW3/8A/ttttttt/wD/ANt/0kkm0kkkkm22222222222237bbaSSSSSSTbbSSSbbbbSSS2S3/8A/wDbbbbbb/8A /t/0kkm0kkm22v222222222222/bbbaSSSSSSTbbSSSbbbbSSSWS2/8A/wDbbbbbf/8A9v8ApJJpJJJtJJL/ALbbbbbbbbbbftttttJJJJJJNttJJJttttJJJZLb/wD/ANttttt//wC//SSaSSSTSSSS/wC2222222222/bbbbbSSSSSSSbbSSSbbbbSSSSSW/8A/wDbbbbb/wD9/wDpJtJJJJJJJJL/APbbbbbbbbbfttttttJJJJJJJttJJJttttJJJLJb/wD/ANttttv/AP3/AEk2kkkkkkkkkv/EABQRAQAAAAAAAAAAAAAAAAAAAOD/2gAIAQMBAT8QAAH /xAAUEQEAAAAAAAAAAAAAAAAAAAAAADg/9oACAECAQE/EAAB/8QAIBABAQEBAAIDAAMBAAAAAAAAEQABE FBgIEBwMICwwP/aAAgBAQABPxD/AJvl4zMz7uzMzM8fdWZmZmZmZmZmZ9tZmZmZmZmZn4MzMzMz7EzMzMzMzMzMzMzMzMzMzxmZmZ9ZZmZmZmZmZmZmZmZmZmZmZmZmfgzPqbMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz6YzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzxmZn0ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmfMMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz49mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZs2zZmZmfEMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzZtm2bMzMzMzMzMz/A/RZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZs2zbNs2zbNmZmZmZmZmZmZmZnr//TeM8eMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzxmfrMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzM8ZmZmePGZn7T1mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmePHjPHr4VmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZ48eszPXjMzMzPHrx8czMzMzMzMzMzMzMzMzMzMzMzMzMzMz1n7j9FmZmfDszMzMzMzMzMzMzMzMzMzM+xMzMzMzMzMzMzMzMzMzPl3yTMzMzM9ZmZmfizPm2fJMzMz8GZmZnzz5Z68fi/3GI/sCf5Ox+Bnv5HvZ+AH4ERHvx+Bnv5/gBf/Z'); 背景尺寸：包含； } `)); document.head.appendChild(styleEl); }); })();

那么表现如何呢？好吧，只要您不经常更改背景或调整模糊半径，它就尽可能快了！总体而言，该技术的性能特征与我们之前为您展示的高性能盒子阴影过渡的方法相当。

取自“https://cainiaojiaocheng.com/index.php?title=CSS提示：多色和镂空投影&oldid=26644”

分类：

CSS