.editor{
overflow:hidden;
height:640px;
padding:0 45px;
border: 0 none;
outline: none;
}
.editor::-webkit-scrollbar{ //设置整个滚动条宽高
width:6px;
height:100%;
}
.editor::-webkit-scrollbar-thumb{ //设置滑块
width:4px;
height:60px;
background-color:#ccc;
border-radius:3px;
}
.editor::-webkit-scrollbar-track
{
border-radius: 10px;
background-color: rgba(255,255,255,.5); //设置背景透明
}

  

css3自定义滚动条背景透明的更多相关文章

  1. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  2. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  3. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  4. android 自定义Dialog背景透明及显示位置设置

    先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog ...

  5. CSS3自定义滚动条样式 -webkit-scrollbar (一)

    Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条的组成: ::-webkit-scroll ...

  6. 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

    有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  7. CSS3自定义滚动条样式-webkit内核

    自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...

  8. CSS3自定义滚动条

    webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,不过由于用到了CSS3的属性,兼容性不好 看下滚动条demo:demo1(纯CSS3版) 滚动条的 ...

  9. CSS3自定义滚动条样式 -webkit-scrollbar

    今天写项目碰上需要改滚动条效果,我的第一反应是,需要用js写滚动条,顿时头大,上网搜了一下,原来css3就可以修改滚动条样式了,非常好啊,下面分享原文地址:http://www.xuanfengge. ...

随机推荐

  1. RESTful API入门

      RESTful是一种设计风格,并不是一种标准. 简短的去概括的话,就是:1.URL 定位资源 资源,就是数据.比如newsfeed,friends,order等 2.用 HTTP 动词描述操作. ...

  2. 转载-asp.net id 和name的区别

    name 是名字id是唯一标识name原来是为了标识之用,但是现在根据规范,都建议用id来标识元素.但是name在以下用途是不能替代的:1. 表单(form)的控件名,提交的数据都用控件的name而不 ...

  3. [android] 新闻客户端引入SlidingMenu

    下载SlidingMenu,https://github.com/jfeinstein10/SlidingMenu 导入library 我们项目右键==>Properties==>Andr ...

  4. elasticsearch6.7 05. Document APIs(2)Index API

    Single document APIs Index API Get API Delete API Update API Multi-document APIs Multi Get API Bulk ...

  5. 【JVM】5、JVM内存管理机制

    转自:http://blog.csdn.net/lengyuhong/article/details/5953544 近期看了看Java内存泄露的一些案例,跟原来的几个哥们讨论了一下,深入研究发现JV ...

  6. 机器人数目-2015决赛Java语言C组第一题

    标题:机器人数目 少年宫新近邮购了小机器人配件,共有3类,其中,A类含有:8个轮子,1个传感器B类含有: 6个轮子,3个传感器C类含有:4个轮子,4个传感器 他们一共订购了100套机器人,收到了轮子6 ...

  7. hdu 1568 (log取对数 / Fib数通项公式)

    hdu 1568 (log取对数 / Fib数通项公式) 2007年到来了.经过2006年一年的修炼,数学神童zouyu终于把0到100000000的Fibonacci数列 (f[0]=0,f[1]= ...

  8. ThinkPHP5事务回滚

    使用事务处理的话,需要数据库引擎支持事务处理.比如 MySQL 的 MyISAM 不支持事务处理,需要使用 InnoDB 引擎. 使用 transaction 方法操作数据库事务,当发生异常会自动回滚 ...

  9. Windows7系统如果安装&升级IE11浏览器

    作为一个前端工作人员,IE678简直就是噩梦,还好现在大多数网站已经开始放弃了对IE6/7/8的支持了. 由于Win7系统默认是安装的IE8,所以在打开部分网站时会提示:IE浏览器版本过低.解决方法如 ...

  10. webpack中mainifest.js vendor.js app.js 三者的区别

    场景: 大家在利用构建工具进行应用最后的打包过程中,我们希望做到的是将业务代码和第三方引用模块代码分开打包. 因为第三方引用模块代码通常很大,而且在不引入新的模块之前基本上是不会变动的.所以我们需要将 ...