VS Code使用Autoprefixer插件给样式自动添加浏览器所需前缀
llh 2022/11/17 1,057 0
打开VS Code应用商店，搜索Autoprefixer并安装； 配置：如图，也可以在 文件->首选项->设置：找到 扩展->Autoprefixer configuration options里找到 添加以下内容： { …
CSS
Less 编译 calc()函数
llh 2022/07/12 556 0
发现在less中 calc(50% – 20px) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(30%)。 .opc-wrapper .shipping-address-i …
CSS calc()函数动态计算长度值
llh 2022/07/12 533 0
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 “+”, “- …
CSS轮廓属性outline 与 border 的区别
llh 2022/04/20 671 0
outline 属性是用于设置以下各个轮廓属性的简写属性： outline-width outline-style（必需） outline-color outline: outline-width outline-styleoutline- …
CSS 颜色 hsl 和 shla
llh 2016/11/13 959 0
用的比较少，当科普一下好了。 使用方法： shl(h, s, l); shla(h, s, l, a); 参数： H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – …
CSS 实现中文首行缩进两个字符
llh 2016/09/20 1,470 0
使用 text-indent 对文本进行缩进，特别是中文文章排版需要首行缩进两个汉字。 使用方法： p{ text-indent: 2em; } em有如下特点： 1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 所以在使 …
CSS3 animation 实现图标编辑状态抖动效果
llh 2016/08/26 1,180 0
@keyframes shake{ 2% { transform:rotate(0.8deg); } 4% { transform:rotate(-0.8deg); } 6% { transform:rotate(0.8deg); } 8% …
CSS3 background-size 设置背景图片尺寸
llh 2016/08/15 1,056 0
background-size 属性规定背景图像的尺寸。 使用语法： background-size: length|percentage|cover|contain; length 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设 …
纯CSS实现三角形标签样式
llh 2016/08/14 1,545 0
纯CSS实现，可以用来做一些类似特价标签等提示信息标签。 右下直角三角形（Triangle Bottom Right）： .triangle-bottomright { width: 0; height: 0; border-bottom: …
CSS 边框虚线 dotted 和 dashed 的区别
llh 2016/07/13 1,802 0
都是虚线，dotted 和 dashed 有什么不同？简单来说，dashed 是由破折号组成的虚线；而 dotted 是由点组成的虚线。 直接看示例最直接，具体效果如下： 这里上下是点虚线，左右是破折号虚线： background-colo …
CSS3 animation-fill-mode 动画保持动作最后结束的状态
llh 2016/07/11 1,677 0
animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。anim …
Ionic SCSS 通过 ionic.app.scss 修改默认样式
llh 2016/07/04 2,448 0
首先，你需要下载一个 SCSS 文件的编译软件，这里使用的是 Koala。 接着当然是使用 Koala 关联我们的文件：根目录/scss/ionic.app.scss，修改后生成的 ionic.app.css 文件默认是在同目录下。 然后需 …
CSS3 align-self 属性
llh 2016/06/21 2,826 0
align-self 属性规定灵活容器内被选中项目的对齐方式。 align-self 属性可重写灵活容器的 align-items 属性。 JavaScript 语法： object.style.alignSelf=”cente …
CSS3 线性渐变 linear-gradient 的使用
llh 2016/05/20 2,799 0
CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 本文主要讨论的是线性渐 …
CSS3 多列 – 拯救文字排版
llh 2016/04/13 1,637 0
很多时候，我们更习惯报纸、杂志的排版方式，这样阅读起来比较不吃力；如何实现文章这样的排版，CSS3 的多列布局模块（column-*）很轻易地帮我们解决这个问题，拯救我们的文字排版； 以下是比较常用到的属性： column-count 属性 …
CSS -moz -webkit -o -ms 前缀都代表什么意思
llh 2016/04/11 4,276 0
虽然现在最新版本的浏览器基本都支持CSS3，不过为了支持老的浏览器版本，还是建议加上前缀，-moz -webkit -o -ms 是浏览器的私有属性，各自代表的浏览器是： Firefox: -moz-box-shadow Safari &a …
解决 CSS 的居中问题
llh 2012/04/27 3,394 0
水平居中： 1)、使用水平居中属性定义水平居中： text-align:center; 无法在各浏览器显示一致！ 2)、使用边界属性定义水平居中： margin:0 auto; 垂直居中： 1)、使 …