css新增ui方案及案例

opocity：透明度, 值为0依然占位, 不会重新绘制
rgba：可以为字体颜色和背景颜色设置透明度
text-shadow: 0px(水平偏移) 0px(垂直偏移) 5px(模糊距离) pink;

 main>div {
   border: 1px solid;
   font: italic bold 44px/1.5em "宋体", "黑体";
   text-shadow: 5px 5px 2px burlywood;
}
案例：文字阴影

 main>div {
    border: 1px solid;
    font: italic bold 44px/1.5em "宋体", "黑体";
    color: #fff;
    text-shadow: 5px 5px 40px #000;
  }
  案例：浮雕文字

main>div {
   border: 1px solid;
   font: italic bold 44px/1.5em "宋体", "黑体";
   color: #000;
   transition: all .5s;
 }
 main>div:hover {
   color: rgba(0, 0, 0, 0);
   text-shadow: 0 0 10px #000,  0 0 10px rebeccapurple;
 }
 案例：文字模糊  移入后变化

 header {
    background: rgba(0, 0, 0, .5);
    height: 80px;
    position: relative;
  }
  img {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    margin-left: 30px;
  }
  .logo {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: red;
    background-image: url('./1.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    /* 过滤器 模糊函数 模糊的是整个元素 */
    filter: blur(10px);
  }
  案例：模糊背景