CSS
文章平均质量分 64
CSS
__畫戟__
前端。知之为知之,不知为不知
展开
-
网站都变成灰色了,如何实现的呢?
当大家看到全站的内容都变成了灰色,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?解决方案很简单,只需要几行代码就能搞定了转载 2022-12-04 16:08:05 · 905 阅读 · 0 评论 -
CSS3实现动画不会影响主线程,JS实现动画会影响主线程
部分css3的动画效果是在合成线程上实现的,不需要主线程介入,所以省去了重拍和重绘的过程,这就大大提升了渲染效率。JavaScript都是在在主线程上执行的,所以JavaScript的动画需要主线程的参与,所以效率会大打折扣!...原创 2020-10-03 11:32:01 · 1494 阅读 · 0 评论 -
css3:animation 动画详解(属性 + 案例)
部分css3的动画效果是在合成线程上实现的,不需要主线程介入,所以省去了重排和重绘的过程,这就大大提升了渲染效率。原创 2022-05-05 12:46:11 · 2068 阅读 · 2 评论 -
css3: 过渡 transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定要添加效果的CSS属性指定效果的持续时间。原创 2022-05-03 21:34:30 · 218 阅读 · 0 评论 -
css3:线性渐变 linear-gradient、径向渐变 radial-gradient
css3:线性渐变 linear-gradient、径向渐变 radial-gradient;有图有真相~原创 2022-05-03 17:02:19 · 1182 阅读 · 0 评论 -
css3: 阴影 text-shadow、box-shadow
css3: text-shadow、box-shadow原创 2022-05-03 14:55:12 · 254 阅读 · 0 评论 -
css3:圆角边框 border-radius 原理
border-radius 原理原创 2022-05-03 12:48:13 · 157 阅读 · 0 评论 -
如何解决canvas生成图片显示不清晰问题?
canvas 高清晰度原创 2022-02-27 23:59:20 · 8655 阅读 · 1 评论 -
webpack高级应用篇(六):PostCSS 与 CSS Modules
PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。比如可以使用 Autoprefixer 插件自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮我们自动的 为 CSS 规则添加前缀,将最新的 CSS 语法转换成大多数浏览器都能理解的语法。CSS Modules解决css命名冲突问题,让你放心优雅的写css。原创 2021-12-10 17:39:53 · 1561 阅读 · 0 评论 -
如何在 React 中优雅的写 CSS?CSS作用域隔离
用了 React 很久了,关于 React 中 CSS 作用域隔离一直不爽,这里总结一下在 React 中 优雅的写css。方案一:namespaces;方案二:CSS in JS;方案三:CSS Modules;原创 2021-11-27 18:02:13 · 3568 阅读 · 0 评论 -
classnames,React动态绑定className
要说到react绑定className,先要了解为何react用的是className,不像其它语言都是用class?这是因为class是JavaScript中的保留关键字,而JSX是JavaScript的扩展。这就是React不使用class而使用className的主要原因常规的绑定<div className="title">标题</div>动态绑定className如果需要根据state值addColor来判断是否添加color,需要如下写法(两种)。//ES6原创 2021-11-08 22:14:44 · 958 阅读 · 1 评论 -
vue开发 - transition之弹窗动画popup
页面上需要弹出一个列表供用户选择,通过简单的v-show控制,感觉体验上总要差那么一点,于是加上了vue的transition,最终实现的效果就是,点击选择银行时,银行列表从下面一点点滑动上来,选择完成后,慢慢滑动 下去,贴上代码:先看下效果:<template> <div class="xn-container"> <button class="type1" @click="showCssPopup(true)">css transiti转载 2021-10-16 23:00:26 · 3627 阅读 · 4 评论 -
在 create-react-app 中使用 styled-jsx
yarn add react-app-rewired customize-cra 在 package.json 中替换 /* package.json */ "scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",- ".原创 2021-09-28 10:27:17 · 640 阅读 · 0 评论 -
rem适配原理
rem计算公式、rem图解、媒体查询、rem含义:w3c的定义是相对于根元素的字体大小(font-size)在根元素的font-size属性中指定时,rem单位是指属性的初始值;这意味着1rem等于html元素的字体大小。原创 2021-08-29 00:03:20 · 441 阅读 · 0 评论 -
阿里巴巴iconfont svg图标不能更改颜色的解决方法,iconfont symbol怎么改颜色
1. svg图标 带有 fill 属性,默认是带有颜色的,想要修改先把原fill颜色去掉,如下:2. 在代码种修改对应颜色即可使用 svg 图标:<svg class="svg" aria-hidden="true"> <use xlink:href="#icon-test"></use></svg>css 修改颜色:.svg { height: 20px; width: 20px;}.svg:last-of-t...转载 2021-07-28 10:21:14 · 3659 阅读 · 1 评论 -
CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)
语法CSS 代码:/* offset-x | offset-y | color */box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */box-shadow: 2px 2px 2px 1px rgb原创 2021-02-05 14:08:12 · 536 阅读 · 1 评论 -
util.scss
/** * display: flex; */@mixin flex( $flex-direction: row, $justify-content: center, $align-items: center, $align-content: flex-start, $flex-wrap: wrap) { display: flex; flex-direction: $flex-direction; flex-wrap: $flex-wrap; justify-.原创 2020-09-20 20:37:03 · 135 阅读 · 0 评论 -
修改el-switch 样式
// 修改 el-switch 样式.el-switch { height: 22px; line-height: 22px;}.el-switch__label { position: absolute; display: none; color: #fff !important; height: 22px; line-height: 22px;}/* 打开时文字位置设置 */.el-switch__label--right { z-index: 1; .原创 2020-09-20 20:26:59 · 1711 阅读 · 1 评论 -
解决【Element-ui的Tabs页签组件在TabPane按钮宽度发生变化后,底部active-bar定位不准确】
问题描述:当切换按钮的语言后,由于文字数量发生改版,按钮宽度变化,被选中的按钮下方的指示线定位不准确解决方案:在组件中绑定ref:<el-tabs ref="tabs"></el-tabs>watch: { currentLang(){ resetTabActivePosition(this.$refs.tabs.$el) }},method: { resetTabActivePosition($...原创 2020-08-26 19:55:38 · 3899 阅读 · 1 评论 -
去除select默认样式
select {/*重置Chrome和Firefox的select边框样式*/border: 1pxsolid #000;/*清除默认的select选择框样式*/appearance:none;-moz-appearance:none;-webkit-appearance:none;}/*清除IE的默认选择框样式,隐藏下拉箭头*/select::-ms-expand { di...原创 2019-01-23 14:03:26 · 5262 阅读 · 0 评论