前端技术

大屏左右两侧高宽一致，内部卡片可按比例设置！flex-grow效果如图。

背景色默认透明，仅在hover时设置背景色；背景色默认透明，仅在hover时设置背景色；

多个按钮根据弧度，延边均匀排列。

仅在文本有省略号时添加 tip 信息

示例：仿一个简单的按钮，文字和图标。使用 stylus，hover 时文字和图标都变色。html<div class="btn"> 点击 <i class="el-icon-sort"/></div>css.btn { background: #ccc; display: inline-block; padding: 8px 15px; cursor: pointer; &:hover

一、安装npm i style-resources-loader -D二、vue.config.js 中配置主要是方法importStylus，然后在module.exports.chainWebpack 中引入。配置完成后，一定要重启项目才生效。const webpack = require('webpack');const path = require('path');function resolve(dir) { return path.join(__di...

先说一下三个重要的地址：git：https://github.com/stylus/stylusstylus npm：https://www.npmjs.com/package/stylusstylus loader ：stylus-loader - npm需要安装 stylus 和 stylus-loader，下面的命令直接全部安装npm install stylus stylus-loader --save-dev最后在文件 package.json devDepende...

CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem：Webpack5 升级后相关插件和配置更新说明

版本没设太高，否则会报错。

本篇仅提供多主题切换思路，示例简单且清晰。

CSS 原生 title 属性太丑，需要重写。

项目对应的webpack以谷歌为例，F12 打开“开发者工具”，页面会出现如上分辨率选择最下一行的 “修改…”打开“修改…”对话框，添加自定义设备… ，注意选择Desktop，最后保存就能切换了。

padding-left：字体左侧的间距与原始字体间距保持一致，视实际情况而定；-webkit-box-shadow：使用盒子阴影遮挡input背景色；width：长度与原始 input 保持一致，视实际情况而定；border-radius：一定要设为 0，默认是有弧度的；input:-webkit-autofill：自动填充。改为浏览器默认样式。原始效果，未使用自动填充的。使用自动填充密码，整个。

【代码】CSS 工具条缩放（无需图标的三角形切换icon）

CSS div 高度或宽度单向调整效果

CSS resize 调整元素大小属性，可改变右下角滑块样式和监听重置高宽事件

CSS html 导入字体

// WebKit 谷歌input::-webkit-input-placeholder { color: #8ba6cd;}// Mozilla Firefox 4 - 18 适配火狐input:-moz-placeholder { color: #8ba6cd;}// Mozilla Firefox 19+ 适配火狐input::-moz-placeholder { color: #8ba6cd;}// IE 10+ input:-ms-input-pl.

左图是初始化边框样式，右图是选择后，自带了粗边框。太丑了....要去除，修改如下：select:focus-visible { /* outline: -webkit-focus-ring-color auto 1px; 这是谷歌浏览器的原生样式*/ outline: none;}...

HTML<div class="test-line" > <img src="loading.gif"> <span>加载中...</span></div>CSS.test-line { height: 32px; line-height: 32px;}img { width: 32px; height: 32px; vertical-align: middle;}

冒犯了，才注意这个细节。。。W3Schoolpadding API 截图浏览器中也有提示解决方案：一般情况下可以用 margin 或 transform，如下图两种方式向左移动

display: -webkit-boxcss display:box 新属性 - whiteMu - 博客园line-clamp: 2;css的line-clamp属性是什么？如何使用？-css教程-PHP中文网

详细链接在Vue ElementUI el-carousel 走马灯 指示灯样式修改 中，代码第 21、22 行中使用

html<div class="test-div"></div>css1. 确定宽度.test-div { display: inline-block; width: 100px; height: 100px; background: red; position:absolute; left: 50%; margin-left: -50px;}宽度为 100px，使用 margin-left: -50p

<template> <div> <!-- 等比缩放 --> <div> <div class="img-div"> <img class="img-01" src="@images/image02.jpg" > </div> <...

::-webkit-scrollbar {/*滚动条整体样式*/ width: 7px; /*高宽分别对应横竖滚动条的尺寸*/ height: 7px;}::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 4px; background: #6A7485;}::-webkit-scrollbar-track {/*滚动条里面轨道*/ background: #224472;}::-webk.

HTML<div class="login-user"> <img src="@images/user.png" /> <div class="user-name">admin</div></div>CSS注意 class="user-name" 中设置了用户名宽度，超出时用 ... 省略号代替.login-user { height: 54px; line-height: 54px; .

一、原始样式html<input type="text" >效果二、去除边框input{ /* 去除默认边框 */ border:none; /* 去除选中或聚焦边框 */ outline: none;}css图中白色就是input聚焦时的效果，为了效果清晰，添加了灰色背景。3、添加前缀html<div class="input-div"> <img :src="require

一、圆html<div class="circle"></div>CSS.circle { display: inline-block; height: 0; width: 0; border: 30px solid red; border-radius: 50%;}效果说明1、这里使用的 div 元素，设置成display:inline-block；2、注意 width 和 height 要设置为..

被设置过度动画的元素可设置overflow: hidden;但这也有局限性1、元素不能有border 边框，否则高宽为0，但border依然存在。可以在为0时，设置 border:none；2、只能在元素内部设置 overflow: auto 或其它值；...

效果html<!-- 框 --><div class="win"> <!-- 四个角的边框效果 --> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div> <div class="borde...

多个用 , 隔开， 左用 left，右用 rightdiv { background:url('~@images/funcbar/item-border.png') no-repeat left,url('~@images/funcbar/item-border.png') no-repeat right;}

.font-color { background: linear-gradient(to right, rgb(45,152,254), rgb(1,198,232)); background-clip: text; color: transparent;}注意：文字无法单独对 color 属性设置渐变，只能按照上面的方式“曲线救国”。这里会存在浏览器兼容问题，只在 Chrome和Microsoft Edge上测试可用。...

场景：常用于工具条或目录树收缩按钮，仅一个图片即可，用 CSS控制图片旋转。.collapse-btn-hidden { transform: rotate(180deg); }

样式如下：方式一：使用图片<template> <div class="main"> <div class="win"> <div class="title"> <i class="icon close-icon"/> </div> </div> </div></t

元素 <button> 和 <input:text>input:focus{outline:none;}button:focus{outline:none;}

div 文字省略.user-name { width: 70px; overflow: hidden; text-overflow: ellipsis;// 用 ... 代替 white-space: nowrap;//不换行}