css
文章平均质量分 74
Embrace924
这个作者很懒,什么都没留下…
展开
-
css3 :not([class]) css3 :not([style])
css3 :not([class]) css3 :not([style])原创 2022-02-15 15:01:14 · 4029 阅读 · 0 评论 -
你应该知道的某些css属性
阴影的效果:https://codepen.io/embrace924/pen/wvJWRNB filter: drop-shadow(2px 4px 8px #585858);设置容器长宽比:aspect-ratio//宽3高1aspect-ratio: 3/1;控制一个元素的可调整大小resizeCSShttps://developer.mozilla.org/zh-CN/docs/Web/CSS/resizenone:元素不能被用户缩放...原创 2021-05-17 11:17:17 · 128 阅读 · 0 评论 -
了解 css 变量
css 变量又称为 CSS 自定义属性,它的值可以在整个文档中重复使用。设定值 --双横线获取值 var()函数变量的声明与使用因为 $被 Sass 用掉了,@被 Less 用掉了 ,为了不产生冲突,官方的 CSS 变量就用了--。声明变量的时候,变量名前面要加两根连词线--。body { // 声明 --font-color: #7F583F;}.main{ // 使用 color:var(--font-color);}css变量命名规则普通字符原创 2021-01-21 17:11:05 · 210 阅读 · 0 评论 -
transitionend 监听transition动画停止 优化性能
问题:当有动画切换页面的时候同时切换后的页面会进行大数据量的图表渲染组合在一起 导致动画卡顿方案:监听动画结束在进行图表渲染 getTransitions() { let t; for (t in this.transitions) { // t即transition,OTransition,MozTransition,WebkitTransition if (this.原创 2020-08-14 14:21:27 · 1129 阅读 · 0 评论 -
css 按钮渐变动画样式
案例地址/转载地址:http://www.jq22.com/code2759<div class="container"> <a class="btn btn-1">Hover me</a> <a class="btn btn-2">Hover me</a> <a class="btn btn-3">Hover me</a> <a class="btn btn-4">Hover me.翻译 2020-07-28 15:46:49 · 898 阅读 · 1 评论 -
elementUI --- el-select 下拉框右侧放提示文字
需求:1.下拉框右侧需要显示对于备注文字<el-select v-model="ruleForm.tableName" placeholder="请选择数据表" @change="changeDataTable" popper-class="step-one"> <el-option v-for=...原创 2020-04-08 16:13:31 · 7684 阅读 · 0 评论 -
vue各种加载loading集合
1. 普通旋转加载效果代码:<template> <button data-label="do it!" class="loading">do it! </button></template><script>export default { name: 'loader...原创 2020-02-17 17:32:01 · 1047 阅读 · 0 评论 -
less 函数 循环 变量写法
案例上一个 覆盖element-ui按钮 less@primary: #3a70df;@danger: #df3a25;@success: #2fcd77;@warning: #fba13b;@white: #ffffff;@black: #000000;@textBlack: #383838;@ccc: #cccccc;@colorlist: @danger, @pri...原创 2019-12-18 10:20:20 · 1721 阅读 · 0 评论 -
element-ui 表格表头添加tooltip
只贴出来需要用到的地方tHeadData=[{"key":"X1","title":"班组"},{"key":"X3","title":"项目_单位"},{"key":"X9","title":"原料配比及消耗_矿槽原料灰_消耗"},{"key":"X27","title":"原料配比及消耗_干法除尘灰_消耗"},{"key":"X29","title":"原料配比及消耗_矿槽原...原创 2019-08-21 11:35:13 · 918 阅读 · 0 评论 -
vue directives 自定义指令 svg 加载动画
js:文件/** * Created by cld on 2019/7/31. */// js 文件import '../../assets/css/load.css';import load from '../../assets/image/load.svg';function getElementStyle(obj, attr) { if (obj.current...原创 2019-07-31 16:57:08 · 622 阅读 · 0 评论 -
20 个让你效率更高的 CSS 代码技巧
JavaScript作者:过冬https://segmentfault.com/a/1190000019542534在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。1.注意外边距折叠与其他大多数属性不同,上下的垂直外边距ma...转载 2019-07-05 09:26:41 · 199 阅读 · 0 评论 -
icon 开关按钮
icon 开关按钮各种选中状态复制代码到https://codepen.io/pen/ 看效果<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3自定义Checkbox特效</title> </head&am转载 2018-06-06 09:44:24 · 1944 阅读 · 0 评论 -
复选框按钮组件 自定义样式
<template> <div class="cb-container"> <input type="checkbox" id="checkbox"> <label for="checkbox" class="cb转载 2018-06-06 10:41:15 · 859 阅读 · 0 评论 -
vue transition 的 从下往上进入 从上往下进入 从右往左进入 从左往右进入效果
vue transition的效果原创 2018-02-28 10:41:31 · 18382 阅读 · 3 评论 -
table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
案例下载地址https://download.csdn.net/download/embrace924/10632898<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title&转载 2018-08-29 09:52:07 · 552 阅读 · 0 评论 -
弹窗屏幕居中 自定义滚动条 css设置
弹窗屏幕居中:半透明黑背景:.black-wrap{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .5); z-index: 999;}弹框内容:.content{ posit...原创 2018-09-19 11:05:58 · 385 阅读 · 0 评论 -
根据分辨率设置rem根大小
函数内部设置 当前设计页面1920 最大页面3840分辨率为1920时 1rem=10px分辨率为3840时 1rem=20px/** * 根据分辨率设置rem根大小 * */(function (designWidth, maxWidth) { var doc = document, win = window, ...原创 2018-11-20 11:31:38 · 2315 阅读 · 0 评论 -
element-ui 整体替换主题色
自定义主题Element 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。我们提供了三种方法,可以进行不同程度的样式自定义。¶仅替换主题色如果仅希望更换 Element 的主题色,推荐使用在线主题生成工具。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色,能够让 Element 的视觉更加符合具体项目的定位。使用上述工具,可以很方便地实时预览主...原创 2019-01-15 18:59:08 · 8360 阅读 · 0 评论 -
iconfont引入后使用所有的字体图标都是小正方形,不正常显示 font-class引用
按着官网的例子使用出来小长方形 官网例子:官网的例子使用不成功~~~~~~~~~~~~~~~小机灵鬼换了一种方法 class="icon font_family icon-xxxx"例如<i class="icon font_family icon-wenbenshaixuan"></i><span class...原创 2019-06-28 14:53:49 · 8220 阅读 · 4 评论 -
SCSS基础用法
1. CSS预处理器定义了一种新的专门的编程语言,编译后成正常的CSS文件。为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理器语言:scss(sass)、LESS等;2.Sass和SCSS的区别文件扩展名不同:“.sass”和“.scss”;Sass是以严格缩进式语法规则来书写的,不带大括号和分号;而SCSS的...转载 2018-06-05 15:36:25 · 1574 阅读 · 0 评论