[CSS]《CSS揭秘》第四章——视觉效果

投影

单侧投影

box-shadow:0px 10px 10px -5px black;

邻边投影

box-shadow:10px 10px 10px 2px black;

双侧投影

box-shadow:10px 0px 10px -10px black,
          -10px 0px 10px -10px black;

*:

box-shadow: h-shadow v-shadow blur/*模糊距离*/ spread/*阴影尺寸*/ color inset;

不规则投影

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

*：drop-shadow() 滤镜可接受的参数基本上跟 box-shadow 属性是一样的，但不包括扩张半径，不包括 inset 关键字，也不支持逗号分割的多层投影语法

毛玻璃效果

body,main::before{
    background: url(./1.jpg) 0 / cover fixed;
}
main{
    background: hsla(0, 0%, 100%, .3);
    width: 200px;
    height:    200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

main::before{
    content: '';
    position: absolute;
    top:0;right: 0;bottom: 0;left: 0;
    z-index: -1;
    filter: blur(20px);
    margin: -30px;
}

折角效果

......

本文转载于:猿2048[CSS]《CSS揭秘》第四章——视觉效果