CSS之webkit-scrollbar例子

基于webkit的浏览器现在也可以自定义其样式：

::-webkit-scrollbar              { /* 1 */ }

::-webkit-scrollbar-button       { /* 2 */ }

::-webkit-scrollbar-track        { /* 3 */ }

::-webkit-scrollbar-track-piece  { /* 4 */ }

::-webkit-scrollbar-thumb        { /* 5 */ }

::-webkit-scrollbar-corner       { /* 6 */ }

::-webkit-resizer                { /* 7 */ }

::-webkit-scrollbar {

width: 12px;

}

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

-webkit-border-radius: 10px;

border-radius: 10px;

border:1px solid #666666

}

::-webkit-scrollbar-thumb {

-webkit-border-radius: 10px;

border-radius: 10px;

background: rgba(255,0,0,0.8);

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255,0,0,0.4);

}

.test{

width:100px;

height:200px;

overflow:scroll;

border:1px solid #666666;

}

<div class="test">kfalsdfjlasjldf</div>

时间： 2024-11-05 11:58:06

CSS之webkit-scrollbar例子的相关文章

css实现圆角三角形例子(无图片)

css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示三角形所对方向"width: 0", 反向为三角形高度(20)"border-width: 20px", 反向颜色为三角形颜色"border-color: #eee", 其它两个方向相加为三角形宽度(30)"border-width: 15px"

用css对webkit内核的浏览器自定义滚动条

用css设置webkit内核浏览器的滚动条主要设置以下7个属性: 1.::-webkit-scrollbar /*滚动条整体部分,可以设置宽度高度*/ 2.::-webkit-scrollbar-button /*滚动条两端的按钮*/ 3.::-webkit-scrollbar-track /*外层轨道*/ 4.::-webkit-scrollbar-track-piece /*内层滚动槽*/ 5.::-webkit-scrollbar-thumb /*滚动的滑块*/ 6.::-webkit

css关于浮动的例子--float

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Floating example</title> <style> .container{ width:800px; border:1px solid #ccc; margin:20px; overflow: hidden; } .box{ wid

css去除webkit内核的默认样式

做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样在按钮和select样式里加入上面css,效果如下图. css代码如下: input{ background:#FF9933; border-radius:5px; color:#fff; padding:3px 20px; -webkit-appearance:none; } select{ backgroun

CSS 一个完整的例子

My first web page What this is A simple page put together using HTML. I said a simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put

CSS雪碧，即CSS Sprite 简单的例子

CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{background:url(img.png) no-repeat;} .Lighthouse{height:768px;width:1024px;background-position:0 0;} .Koala{height:768px;width:1024px;background-position:0 -768px

WebKit的CSS扩展(WebKit是私有属性)

1.-webkit-touch-callout 当你触摸并按住触摸目标时候,禁止或显示系统默认菜单.在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单.这个属性可以让你禁用系统默认菜单. 2.-webkit-line-clamp 限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性:display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 .-webkit-box

css一些简单的例子

1.http协议 1 一:HTTP协议:hypertext transport protocol(超文本传输协议) 2 特点: 3 1.请求与响应 4 2.无状态的协议 5 请求协议: 6 请求首行: 7 请求头信息: 8 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 9 Accept-Encoding:gzip, deflate, br 10 Accept

[CSS] Showing horizontal scrollbar always for the table

table { display: block; overflow: scroll; width: 200px; height:95vh; }

webkit内核浏览器的CSS写法

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop) div p :matches(em, b, strong) {} 使