css基础笔记

晴朗的天空来之不易
2021-3-23 / 0 评论 / 809 阅读 / 正在检测是否收录...

# background-attachment 背景图位置固定属性

前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

取值:

scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。

fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了body上。

local:背景图相对于元素内容固定,

原文地址 (opens new window)

# css修改滚动条默认样式

         .innerbox{
             overflow-x: hidden;
             overflow-y: auto;
             color: #000;
             font-size: .7rem;
             font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
             height: 100%;
         }
         /*滚动条样式*/
         .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
             width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
             height: 4px;
         }
         .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
             border-radius: 5px;
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
             background: rgba(0,0,0,0.2);
         }
         .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
             border-radius: 0;
             background: rgba(0,0,0,0.1);
         }

原文地址 (opens new window)

# 加一只上吊的小猫咪

/*加一只上吊的小猫咪~*/
.cd-top{
    position: fixed;
    right: 25px;
    top: -900px;
    z-index: 99;
    width: 70px;
    height: 600px;
    background: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/scroll.png) no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: url(https://files-cdn.cnblogs.com/files/miluluyo/cursor.ico),auto;
    opacity: 1;
}

# 百度弹窗浮层效果

.s-mod-setweather {
    position: absolute;
    top: 48px;
    right: 24px;
    width: 496px;
    z-index: 500;
    display: none;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);
    border-radius: 12px;
    text-align: left;
    }
0