微信登录

书闪笔记

书闪文章

CSS教程

其他属性 - ::-webkit-scrollbar - 滚动条

+

在此添加单个AI新笔记

css - css网站

🌐资源网站

导入 - CSS文件导入HTML

📦导入文件

导入 - CSS文件导入CSS文件 - @import

📂导入样式

选择器 - id、class、<标签>

单位 - 单位 - px、%、em、rem、vw、vh、 vmin、vmax

📏尺寸单位

单位 - 单位计算 - calc()

🧮计算函数

通用属性 - display:; - 框的类型

通用属性 - position:; - 定位

📍定位属性

通用属性 - float:left; - 浮动-俄罗斯方块

💧浮动属性

通用属性 - width:100%;width:auto;

📏宽度设置

通用属性 - margin: 0 auto; - 外边框-居中

🎯居中布局

通用属性 - border:2px solid #000; - 边框样式

🖌️边框样式

通用属性 - border-radius:20px; - 圆角

🟢圆角边框

通用属性 - padding:; - 内边框

通用属性 - color:#000000; - 文字颜色

🎨文字颜色

通用属性 - font-size: 12px; - 文字大小

🔤字号大小

通用属性 - -webkit-text-stroke:1px #00ffff; - 文字描边

🖍️文字描边

通用属性 - opacity:0.5; - 透明度

通用属性 - box-shadow: 1px 1px 1px #色号; - 盒子阴影

🌑阴影效果

通用属性 - text-shadow:1px 1px 1px #色号; - 文字阴影

✨文字阴影

通用属性 - background-image:#色号50; - 背景+渐变色

🌈渐变背景

通用属性 - background-color:#色号50; - 背景色+透明度

🎨背景颜色

通用属性 - z-index:; - 远近

🔝层叠顺序

通用属性 - transform: rotate(18deg); - 旋转

🔄旋转变换

a标签 - text-decoration: none; - 去掉下划线

🚫去除下划线

li标签 - list-style-type:none - 去掉点

✅列表样式

li标签 - display:inline横向

➡️横向排列

li标签 - background:url() - 加自定义图片

🖼️背景图片

li标签 - .bg:hover{} - 鼠标滑过变css

🖱️悬停效果

特殊效果 - 高度height等于width

⚖️宽高相等

其他属性 - cursor:pointer - 靠近鼠标加上小手

🖱️鼠标指针

其他属性 - keyframes - 动画

🎬关键帧动画

其他属性 - overflow:scroll; - 内容溢出设置

📜溢出控制

其他属性 - ::-webkit-scrollbar - 滚动条

全局变量 - root{} - --xx - var(--xx)

全局变量 - root{} - 主题一键切换

🎨主题切换

其他属性 - @media (){} - 窗口适应

📱媒体查询

bootstrap - 模板

🚀框架模板

其他属性 - ::-webkit-scrollbar - 滚动条

/*滚动条整体部分 ,设置水平滚动条的高,垂直滚动条的宽*/
#xxx::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
/*滚动的滑块,设置滚动条的颜色,圆角*/
#xxx::-webkit-scrollbar-thumb {
    height: 8px;
    background-color: #ff0000;
}
/*外层轨道*/
#xxx::-webkit-scrollbar-track {
    height: 8px;
    background-color: #0000ff;
}
/*内层滚动槽,设置滚动条的颜色,宽度*/
#xxx::-webkit-scrollbar-track-piece{
}
/*边角,滚动条的交汇处*/
#xxx::-webkit-scrollbar-corner{
}
/*滚动条两端的按钮,允许通过点击微调小方块的位置*/
#xxx::-webkit-scrollbar-button{
}

粤ICP备19057273号-3