css 实现输入框错误 晃动效果
网上去找个晃动的样式 放到我们 login的 css 文件 style.scss 中:.shake { animation: shake 800ms ease-in-out; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } ... ...阅读全文
阅读全文
CSS 之 position 相对定位元素 absolute ，relative，fix 等
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位：绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它的正常默认位置进行偏移。static 为 默认值1. relative 演示relative 是相对于 正常位置的 偏移。它并不影响附近的元素。<html> <head> <style type="text/css"> * { padding... ...阅读全文
input 输入框 在自动填充时 背景颜色问题
Chrome 浏览器下 form 表单，点击 input 输入框选择输入记录自动填充时，输入框背景颜色会改变，这是 chrome 浏览器内置的表单自动填充背景颜色功能。解决方法input:-internal-autofill-previewed, input:-internal-autofill-selected { // 自动填充时的字体颜色 -webkit-text-fill-color: #fff; // ... ...阅读全文
css 的 box-sizing 布局 如何计算一个元素的总宽度和总高度
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。在 CSS 盒子模型的默认定义里，设置一个元素所设置的 width 与 height 只会应用到这个元素的内容区（content-box）。如果再设置这个元素的 border 边框 或 padding 内边距 ，那么这个盒子的实际宽度和高度为： width + border + padding。这样就可能会超出 父盒子1. box-sizing 的设置box-sizing 属性可以被用来调整这些表现:content-box 是 默认值如果你设置一个元素的宽为 100px，那么... ...阅读全文