【转】滚动条样式

最新推荐文章于 2025-12-05 15:36:57 发布
原创 最新推荐文章于 2025-12-05 15:36:57 发布 · 159 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#操作系统

http://blog.youkuaiyun.com/hanshileiai/article/details/40398177

 

 

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  • ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
  • ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

 

定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？

伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。

任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。

 

 

  1. :horizontal  
  2. //horizontal伪类适用于任何水平方向上的滚动条  
  3.   
  4. :vertical  
  5. //vertical伪类适用于任何垂直方向的滚动条  
  6.   
  7. :decrement  
  8. //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮  
  9.   
  10. :increment  
  11. //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮  
  12.   
  13. :start  
  14. //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面  
  15.   
  16. :end  
  17. //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面  
  18.   
  19. :double-button  
  20. //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  21.   
  22. :single-button  
  23. //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  24.   
  25. :no-button  
  26. no-button伪类表示轨道结束的位置没有按钮。  
  27.   
  28. :corner-present  
  29. //corner-present伪类表示滚动条的角落是否存在。  
  30.   
  31. :window-inactive  
  32. //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。  
  33.   
  34. ::-webkit-scrollbar-track-piece:start {  
  35. /*滚动条上半边或左半边*/  
  36. }  
  37.   
  38. ::-webkit-scrollbar-thumb:window-inactive {  
  39. /*当焦点不在当前区域滑块的状态*/  
  40. }  
  41.   
  42. ::-webkit-scrollbar-button:horizontal:decrement:hover {  
  43. /*当鼠标在水平滚动条下面的按钮上的状态*/  
  44. }  

 

----------------------------------------------------------------------------------------------------------------------------------

 

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
  <title>CSS3自定义滚动条图片版-轩枫阁</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #container{
 width: 100%;
 height: 1200px;
 line-height: 600px;
 text-align: center;
 background: #ccc;
 }
 /*定义滚动条的高宽*/
 ::-webkit-scrollbar {
 width: 16px;
 height: 16px;
 }
 /*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
 /*显示滚动条上方的渐增按钮*/
 ::-webkit-scrollbar-button:start:decrement,
 /*显示滚动条上方的渐减按钮*/
 ::-webkit-scrollbar-button:end:increment {
 display: block;
 }
 /*隐藏滚动条上方的渐增按钮*/
 ::-webkit-scrollbar-button:vertical:start:increment,
 ::-webkit-scrollbar-button:vertical:end:decrement {
 display: none;
 }
 /* 定义滚动条渐增按扭的样式 */
 ::-webkit-scrollbar-button:end:increment {
 background-image: url(./images/scroll_cntrl_dwn.png);
 }
 /* 定义滚动条渐减按扭的样式 */
 ::-webkit-scrollbar-button:start:decrement {
 background-image: url(./images/scroll_cntrl_up.png);
 }
 /* 垂直滚动条的第三层轨道的上段 */
 ::-webkit-scrollbar-track-piece:vertical:start {
 background-image: url(./images/scroll_gutter_top.png), url(./images/scroll_gutter_mid.png);
 background-repeat: no-repeat, repeat-y;
 }
 /* 垂直滚动条的第三层轨道的下段 */
 ::-webkit-scrollbar-track-piece:vertical:end {
 background-image: url(./images/scroll_gutter_btm.png), url(./images/scroll_gutter_mid.png);
 background-repeat: no-repeat, repeat-y;
 background-position: bottom left, 0 0;
 }
 /* 垂直滚动条的滑动块 */
 ::-webkit-scrollbar-thumb:vertical {
 height: 56px;
 -webkit-border-image: url(./images/scroll_thumb.png) 8 0 8 0 stretch stretch;
 border-width: 8 0 8 0;
 }
  
 </style>
 </head>
 <body>
  <div id="container">CSS3自定义滚动条图片版<br/>请在chrome下看右侧滚动条，其他浏览器没有效果哦</div>
 </body>
 

</html>

------------------------------------------------------------------------------------------------------------------------------

 

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
  <title>CSS3自定义滚动条-轩枫阁</title>
 <style>
 header
 {
 font-family: 'Lobster', cursive;
 text-align: center;
 font-size: 25px;
 }
  
 #info
 {
 font-size: 18px;
 color: #555;
 text-align: center;
 margin-bottom: 25px;
 }
  
 a{
 color: #074E8C;
 }
  
 .scrollbar
 {
 margin-left: 30px;
 float: left;
 height: 300px;
 width: 65px;
 background: #F5F5F5;
 overflow-y: scroll;
 margin-bottom: 25px;
 }
  
 .force-overflow
 {
 min-height: 450px;
 }
  
 #wrapper
 {
 text-align: center;
 width: 500px;
 margin: auto;
 }
  
 /*
 * STYLE 1
 */
  
 #style-1::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
 }
  
 #style-1::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-1::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #555;
 }
  
 /*
 * STYLE 2
 */
  
 #style-2::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
 }
  
 #style-2::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-2::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
 }
  
 /*
 * STYLE 3
 */
  
 #style-3::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-3::-webkit-scrollbar
 {
 width: 6px;
 background-color: #F5F5F5;
 }
  
 #style-3::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 }
  
 /*
 * STYLE 4
 */
  
 #style-4::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-4::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-4::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 border: 2px solid #555555;
 }
  
  
 /*
 * STYLE 5
 */
  
 #style-5::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-5::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-5::-webkit-scrollbar-thumb
 {
 background-color: #0ae;
  
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
 color-stop(.5, rgba(255, 255, 255, .2)),
 color-stop(.5, transparent), to(transparent));
 }
  
  
 /*
 * STYLE 6
 */
  
 #style-6::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-6::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-6::-webkit-scrollbar-thumb
 {
 background-color: #F90;
 background-image: -webkit-linear-gradient(45deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 7
 */
  
 #style-7::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-7::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-7::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-image: -webkit-gradient(linear,
 left bottom,
 left top,
 color-stop(0.44, rgb(122,153,217)),
 color-stop(0.72, rgb(73,125,189)),
 color-stop(0.86, rgb(28,58,148)));
 }
  
 /*
 * STYLE 8
 */
  
 #style-8::-webkit-scrollbar-track
 {
 border: 1px solid black;
 background-color: #F5F5F5;
 }
  
 #style-8::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-8::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 }
  
  
 /*
 * STYLE 9
 */
  
 #style-9::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-9::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-9::-webkit-scrollbar-thumb
 {
 background-color: #F90;
 background-image: -webkit-linear-gradient(90deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 10
 */
  
 #style-10::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-10::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-10::-webkit-scrollbar-thumb
 {
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(0, 0, 0, .2) 50%,
 rgba(0, 0, 0, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 11
 */
  
 #style-11::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-11::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-11::-webkit-scrollbar-thumb
 {
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
 rgba(255, 255, 255, 0.5) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0.5) 75%,
 transparent 75%,
 transparent)
 }
  
 /*
 * STYLE 12
 */
  
 #style-12::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
 }
  
 #style-12::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-12::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
 }
  
 /*
 * STYLE 13
 */
  
 #style-13::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #CCCCCC;
 }
  
 #style-13::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-13::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
 }
  
 /*
 * STYLE 14
 */
  
 #style-14::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
 background-color: #CCCCCC;
 }
  
 #style-14::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-14::-webkit-scrollbar-thumb
 {
 background-color: #FFF;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, 1) 0%,
 rgba(0, 0, 0, 1) 25%,
 transparent 100%,
 rgba(0, 0, 0, 1) 75%,
 transparent)
 }
  
 /*
 * STYLE 15
 */
  
 #style-15::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-15::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-15::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
 40% 0%,
 75% 84%,
 from(#4D9C41),
 to(#19911D),
 color-stop(.6,#54DE5D))
 }
  
 /*
 * STYLE 16
 */
  
 #style-16::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-16::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-16::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(top,
 #e4f5fc 0%,
 #bfe8f9 50%,
 #9fd8ef 51%,
 #2ab0ed 100%);
 }
  
  
 </style>
 </head>
 <body>
 <div id="wrapper">
 <div class="scrollbar" id="style-default">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-2">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-3">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-4">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-5">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-6">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-7">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-8">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-9">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-10">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-11">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-13">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-14">
  <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-15">
  <div class="force-overflow"></div>
 </div>
 </div>
 </body>
 

</html>

 

 

 

 

 

anole2012
关注
CSS 设置滚动条样式的实例代码
09-24
标题提到的"CSS 设置滚动条样式的实例代码"是关于如何通过CSS3来改变网页滚动条的外观。下面我们将详细探讨这个主题。 首先，滚动条由几个组成部分组成： 1. `::-webkit-scrollbar`：这是滚动条的整体部分，你可以...
用css给tbody加垂直滚动条的具体思路及样式代码
12-13
在网页设计中，有时我们需要对表格的 tbody 部分添加垂直滚动条，以便当数据过多时，用户可以轻松地浏览和查看所有信息。这里我们将详细介绍如何使用 CSS 实现这一功能，并提供相应的代码示例。 首先，理解核心思路...
转载-滚动条的CSS样式
沧海一粟
06-14 1283
IE下的滚动条样式 IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。 这些样式规则很简单： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color;
滚动条的样式说明
xianyang988的专栏
12-21 528
1、Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置  overflow-x 水平方向内容溢出时的设置  overflow-y 垂直方向内容溢出时的设置 以上三个属性设置的值为visible、scroll、hidden、auto。visible 默认值。使用该值时，无论设置的"width"和"height" 的值是多少，其中的内容无论是否超出范围
【CSS】滚动条样式详解
热门推荐
NineWaited的博客
08-21 4万+
浏览器设置滚动条样式详解
css美化滚动条样式,css3美化滚动条样式
weixin_33268464的博客
08-03 1254
1.改变浏览器默认的滚动条样式::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性background-color:#f8f8f8;}::-webkit-scrollbar {//滚动条的宽度width:9px;height:9px;}::-webkit-scrollbar-thumb {//滚动条的设置background-color:#d...
CSS 自定义滚动条样式
2301_76162638的博客
11-12 1014
【代码】CSS 自定义滚动条样式。
css 好看滚动条样式大全,CSS 个性化滚动条样式
weixin_39788740的博客
08-04 4567
页面中有许多内容过多时，为了不影响整体布局，总会有滚动效果代替。but,许多情况浏览器自带的滚动条样式与整体UI 界面不搭啊，怎么办，当然作为界面的化妆师CSS就出手啦~滚动条样式由多个伪类组成 下面是我的小栗子::-webkit-scrollbar{width: 10px;height: 10px;background: #013b8e;}/* 滚动槽 */::-webkit-scrollbar...
android设置滚动条样式,Android零基础入门｜滚动视图ScrollView-设置滚动条样式
weixin_35949064的博客
05-25 4777
前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件，接下来几期继续来学习常见的其他组件。一、ScrollView概述从前面的学习有的同学可能已经发现，当拥有很多内容时屏幕显示不完，显示不全的部分完全看不见。但是在实际项目里面，很多内容都不止一个屏幕宽度或高度，那怎么办呢？那就需要本节学习的ScrollView来完成。在默认情况下，...
【摘】table滚动条样式
wsdhla的专栏
01-31 3902
参考文章： 1、http://blog.sina.com.cn/s/blog_821025b70100wf82.html 2、https://blog.youkuaiyun.com/qq_42092177/article/details/80924828 3、https://www.cnblogs.com/zerozq/p/9138320.html 4、https://blog.youkuaiyun.com/ha...
css3 滚动条样式
cc蒲公英的博客
04-21 1629
自定义IE浏览器滚动条样式 追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性况： 滚动条样式 支持情况 支持浏览器版本 可否继承 描述 scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条
CSS自定义滚动条样式
perny的专栏
05-22 1129
相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。 IE下的滚动条样式:示例 scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color;
滚动条样式
04-22
在探讨滚动条样式的主题时，我们深入到CSS这一领域，了解如何通过一系列特定属性来定制和美化网页上的滚动条。滚动条是用户界面中一个常见的元素，用于帮助用户浏览超过视口尺寸的内容。默认情况下，滚动条的样式...
[转] 滚动条类(影片剪辑，动态文本都可用，自定义滚动条样式)
05-29
在AS3中，我们可以创建一个自定义的滚动条组件，以适应各种设计需求，比如改变滚动条的样式或行为。 首先，我们来看"phhui_ScrollBar.as"这个文件。这很可能是定义滚动条类的源代码文件。在这个类中，开发者可能...
智能时代的操作系统范式：openEuler的AI就绪度深度评估
Pocker_Spades_A的博客
12-05 982
通过从基础环境配置到复杂分布式训练的全方位测试，openEuler展现了其作为AI时代操作系统的强大实力。在性能基准测试中，openEuler在矩阵计算、训练吞吐量、内存管理、分布式训练和模型推理等关键维度均表现出卓越的性能特性。其深度优化的内核调度、高效的异构计算支持和完善的AI工具链生态，为机器学习工作负载提供了稳定而高效的计算平台。openEuler通过持续的自主创新，成功将操作系统的传统优势与AI时代的新需求相结合，为开发者提供了从模型开发到部署上线的完整解决方案。
Day4 AtomGit口袋工具开发1.0
Rene_ZHK的博客
12-02 748
Day4 AtomGit口袋工具开发1.0
Linux 进程状态与进程管理命令
qq_52537313的博客
12-04 806
在 Linux 系统中，是程序的运行实例，是操作系统资源分配和调度的基本单位。进程从创建到终止会经历多种状态，通过进程管理命令可以查看、监控和控制这些状态。本教程将结合核心命令，全方位讲解进程状态及管理方法。
Linux设备管理：从内核驱动到用户空间的完整架构解析
X
12-03 796
A[物理硬件插入/移除] --> B[内核驱动探测]B --> C{Linux统一设备模型 LDM}C --> D[在/sysfs创建对象]C --> E[发送uevent事件]D --> F[用户空间工具<br>lspci, lsusb等]E --> G[UDEV守护进程]G --> H[扫描规则库 /etc/udev/rules.d/]H --> I[匹配并执行规则]I --> J1[创建设备节点 /dev/]I --> J2[设置权限与所有权]I --> J3[执行自定义脚本]
openEuler在多元算力融合场景下的技术实践与性能洞察
最新发布
bushibrnxiaohaij的博客
12-05 383
随着计算架构的多元化发展，操作系统调度器已成为释放硬件算力潜力的核心组件。openEuler作为面向数字基础设施的开源操作系统，其智能调度器技术为x86、ARM等多样性算力架构提供了统一的调度支撑。本次测评通过系统化的压力测试，全面验证openEuler在混合工作负载下的调度性能，重点评估其在CPU密集型、内存密集型及混合负载场景下的资源分配效率，为多样性算力场景的系统选型提供可靠的技术参考。openEuler官网：https://www.openeuler.org/en/ 输出结果： 环境配置验证结果：
如何自定义滚动条样式？
09-12
自定义滚动条样式可以使用以下几种方法： 1. **使用 CSS 属性和选择器**：使用这些 CSS 属性和选择器，能为滚动条添加自定义样式，并使其与网站或应用程序的设计风格保持一致。不过在应用自定义滚动条样式时，需要在...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值