随笔分类 - css3
摘要：Tailwind CSS 是一个为快速创建定制化 UI 组件而设计的实用型框架。与其他 CSS 框架或库不同，Tailwind CSS 组件没有预先设置好样式。可以使用 Tailwind 的低级实用类来为 CSS 元素设置样式，如 margin、flex、color 等。 自从 2017 年发布以来
阅读全文
摘要：CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox
阅读全文
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=dev
阅读全文
摘要：首先，固定宽度1. word-break:break-all;只对英文起作用，以字母作为换行依据（中英文混排，一行显示）2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据（多，中文英文分行显示）3. white-space:pre-wrap; 只对中文起作用，强制换
阅读全文
摘要：说明： HSL(H,S,L) HSL(H,S,L) 取值： H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮度)。取值为：0.0
阅读全文
摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Wsscat DEMO</title> </head> <body> <div class="box"></div> <div class="box"></div> <div cl
阅读全文
摘要：在移动前端制作中，很多新的css3特性能够帮助我们更好的制作。例如这个垂直水平居中问题，就有一个简单的代码可以解决： 利用CSS3的transform:translate .center{ width:50%; position: absolute; top: 50%; left: 50%; -mo
阅读全文
