css 预处理
渔倒到
返璞归真(人-> 猿)
展开
-
table单元格溢出处理
& > .ant-table-body > .ant-table-fixed { // table-layout: fixed; .ant-table-tbody { // display: table-row-group; vertical-align: middle; border-color: inherit; & > tr { // display: table-row; vertical-align:原创 2021-03-10 17:09:31 · 135 阅读 · 0 评论 -
滚动条的样式
// &:hover::-webkit-scrollbar {// display: inline-block;// }// 美化// &::-webkit-scrollbar {// // display: none;// width: 6px; /*高宽分别对应横竖滚动条的尺寸*/// height: 6px;// }// &::-webkit-scrollbar-thumb {// border-radius: 6px;// ba原创 2021-03-10 17:08:06 · 106 阅读 · 0 评论 -
如何在js 中使用 css 预处理语言中的 样式变量
上一篇文章中讲到,如何在vue 项目中移入全局sass变量,那么定义的变量是否只能在 css 中使用呢, 答案是不, 可以在js 中使用, 很厉害的。首先需要安装> npm install sass-loader node-sass webpack --save-dev在 vueconfig 中 module: { rules: [ { te...原创 2020-03-11 18:30:21 · 245 阅读 · 0 评论 -
vue 项目中 引入css sass less 全局变量的方式
当项目达到了一定规模时, 代码规范,组件化就成了重中之重, 之前已经写了几篇组件化的文章, 接下来说一下css 的规范,css 使用sass 的全局变量定义样式, 好处是 更换主题, 主色调的变更时, 不用一个页面一个页面的去找, 只需要改一个变量值就ok了。如果有不明白或者没用过 sass 的可以去看我之前的文章 sass 入门全局的sass 文件内容大致是这样的$nav-6: #0B316...原创 2020-03-11 18:23:23 · 1846 阅读 · 0 评论 -
自定义 el-timeline 节点样式
<div class="left-lineBox"> <el-timeline> <el-timeline-item v-for="(activity, index) in activities" :key="index" ...原创 2019-10-31 16:44:06 · 16997 阅读 · 3 评论 -
利用CSS3实现透明边框和多重边框
使用background-clip属性实现透明边框.bordertest { border: 30px solid hsla(0,0%,90%,.5); background: #bbb; background-clip: padding-box; width:500px; height:300px;}使用box-shadow模拟...原创 2019-10-31 15:34:08 · 372 阅读 · 0 评论 -
css 实现文字竖向排列,文本溢出省略号
多行文本margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/ 单行文本 width: ...原创 2019-10-31 13:58:49 · 2332 阅读 · 0 评论 -
css 修改滚动条样式
.scroll-div::-webkit-scrollbar { width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}.scroll-div::-webkit-scrollbar-thumb { border-radius: 6px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2...原创 2019-10-29 14:45:33 · 138 阅读 · 0 评论 -
css 修改滚动条样式
CSS3自定义滚动条样式自定义滚动条实现此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:滚动条组成部分::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)...原创 2019-08-26 15:47:29 · 722 阅读 · 0 评论 -
css 预处理语言之scss语法基础
SCSS 教程 <!-- 作者区域 --> <div class="author"> <a class="avatar" href="/u/199fb97d4561"> <img src="//upload.jianshu.io/users/upload_avatars/9813501/0e6e...转载 2019-04-17 16:18:42 · 757 阅读 · 0 评论 -
css 预处理语言之stylus 安装与使用
$ npm install stylus原创 2019-03-06 11:00:27 · 1907 阅读 · 0 评论