a5252145的博客

clip-pathCSS clip-path 生成器上面6个点，需要配置6个属性，每个属性都代表当前点的坐标clip-path: polygon(5% 0, 100% 0, 100% 90%, 95% 100%, 0 100%, 0 10%);注意：clip-path默认会把border也去掉，若想保留border，需要在当前div加一个父元素，父元素css保持和当前div一致，父元素width和height比当前大2px即可。...

参考奇舞周刊：如何居中一个元素

Vue项目中实现div滚轮放大缩小，拖拽效果，类似画布效果引入插件vue-draggable-resizable，点我进入GitHub地址。npm install --save vue-draggable-resizablemain.js文件中import VueDraggableResizable from 'vue-draggable-resizable'import 'vue-draggable-resizable/dist/VueDraggableResizable.css

横向滚动条white-space: nowrap;min-width: 900px;overflow-x: auto;效果图：

css - Loading// iview icon<Icon class="loading" type="ios-loading" />// css.loading { color: #2d8cf0; animation: loading 1s linear infinite;}@keyframes loading { from { transform: rotate(0deg); } to { transf

vue 文件加上scoped属性后不能覆盖UI组件的原有样式为了vue页面样式模块化，不对全局造成污染，一般每个页面的style标签都加上scoped属性，表示该style样式只在当前的页面生效，不会泄漏到子组件或其他页面中。但是scoped也会造成一些额外的负担，比如无法覆盖原有组件的样式。此时我们可以使用 /deep/ 或者>>>。<style scoped lang="less"> .fault-predict { /deep/ .i

css子元素height:100%无效问题。1. 高度自适应前提是，子元素所有的父级元素全部height:100%.2. html:{ height:100% } body:{ height:100% }

背景渐变色css3：linear-gradient.gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color...

文字不换行、显示省略号white-space: nowrap;text-overflow: ellipsis;overflow: hidden;

img / div / 字体 垂直居中div 实现方式第一种:我认为最简单的img垂直居中divhtml:<div class="app-logo"> <img src="${ctx}/static/img/logo.png"> <i class="visible"></i></div>css:.app-logo {...

字体设置为渐变色background:linear-gradient(RGBA(1,1,1,0.8) 50%,RGBA(1,1,1,0.9))color:transparentbackground-clip:text默认为上下渐变，若想左右渐变，设置如下：background:linear-gradient(90deg RGBA(1,1,1,0.8) 50%,RGBA(1,1,1,0.9...

css兼容浏览器代码设置/* 简单属性 */.myClass { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; /* 不带前缀的放到最后 */}/...

垂直属性vertical-align：middle/top/bottom前提：1.给父元素设置行高 line-height           2.子元素本身必须为行内块元素，若不是则必须设置display:inline-block;或dispaly:inline;vertical-align:不可继承。...

先写一个样式： &lt;style&gt; div{ width: 200px; height: 200px; margin: 100px auto; background-color: #336699; /*transition:width 1s;*/ transition:all 1s; ...