css样式学习记录

怼烎@ 2022-09-06 00:16 160阅读 0赞

## overflow: scroll 滚动条样式自定义 ##

/* 定义滚动条样式 */
    ::-webkit-scrollbar { 
      width: 6px;
      height: 10px;
      background-color: rgba(240, 240, 240, 1);
    }
    
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track { 
      box-shadow: inset 0 0 0px rgba(240, 240, 240, 1);
      border-radius: 10px;
      background-color: rgba(240, 240, 240, 1);
    }
    
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb { 
      border-radius: 10px;
      box-shadow: inset 0 0 0px rgba(58, 57, 57, 0.5);
      background-color: rgba(71, 69, 69, 0.5);
    }

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkxODgwMw_size_16_color_FFFFFF_t_70]

## 超出长度隐藏内容 并显示省略号 ##

/*超出长度隐藏*/
    overflow: hidden;
    /*超出长度显示省略号*/
    text-overflow: ellipsis;
    /*超出长度不换行*/
    white-space: nowrap;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkxODgwMw_size_16_color_FFFFFF_t_70]: /images/20220829/f4f18cb5c6804874859ed913f4820a2f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS样式

一、概念 CSS(Cascading Style Sheets) 层叠样式表，叫级联样式表，简称样式表。文件后缀.css。语法：CSS规则由两个主要的部分构成：选

ゞ浴缸里的玫瑰/ 2024年03月23日 13:29/ 0 赞/ 54 阅读

相关 css格式和样式选择器-学习记录

文章目录一、css代码代码格式 1、内联格式（不推荐） 2、内部格式（不推荐） 3、外部格式（推荐）二、css样

心已赠人/ 2024年02月18日 09:12/ 0 赞/ 2 阅读

相关 CSS基础——CSS字体样式属性【学习笔记】

CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font

淩亂°似流年/ 2022年12月22日 11:30/ 0 赞/ 285 阅读

相关 css样式学习记录

overflow: scroll 滚动条样式自定义 / 定义滚动条样式 / ::-webkit-scrollbar { width: 6px

怼烎@/ 2022年09月06日 00:16/ 0 赞/ 161 阅读

相关【CSS】学习笔记1 使用CSS样式表

<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用CSS样式表

小灰灰/ 2022年09月03日 15:26/ 0 赞/ 198 阅读

相关 CSS样式

一、内部样式表 1、选择器： <html> <head> <title>内部样式表</title> <style type=

怼烎@/ 2022年06月12日 11:15/ 0 赞/ 343 阅读

相关 css样式

1.div下边框虚线 <html> <head> <style type="text/css"> dv{ border-bot

た入场券/ 2022年06月05日 05:25/ 0 赞/ 250 阅读

相关 CSS样式

1. font-size:20px; /\设置文字字号\/ 2. width:20px;

矫情吗；*/ 2022年05月24日 10:37/ 0 赞/ 298 阅读

相关 CSS学习摘要-引入样式

CSS学习摘要-引入样式注：主要是摘录自[MDN 网络开发者][MDN]这个网站的。 CSS 实际上如何工作？当浏览器显示文档时，它必须将文档的内容与其样式信

野性酷女/ 2022年05月22日 21:28/ 0 赞/ 268 阅读

相关 CSS样式

设置透明背景 background-color: transparent; div靠右或靠左显示 float:right float:left

以你之姓@/ 2021年09月25日 08:24/ 0 赞/ 465 阅读