CSS 使用技巧

CSS 使用技巧

引入苹方字体

苹方提供了六个字重，font-family 定义如下：
    苹方-简 常规体
    font-family: PingFangSC-Regular, sans-serif;
    苹方-简 极细体
    font-family: PingFangSC-Ultralight, sans-serif;
    苹方-简 细体
    font-family: PingFangSC-Light, sans-serif;
    苹方-简 纤细体
    font-family: PingFangSC-Thin, sans-serif;
    苹方-简 中黑体
    font-family: PingFangSC-Medium, sans-serif;
    苹方-简 中粗体
    font-family: PingFangSC-Semibold, sans-serif;

    苹方除了简体的：苹方-简（PingFang SC），还为繁体用户提供有：苹方-繁（PingFang TC） ，苹方-港（PingFang HK）
    
    苹方-繁 的 CSS font-family 使用：
    font-family: PingFangTC-Regular, sans-serif;
    font-family: PingFangTC-Ultralight, sans-serif;
    font-family: PingFangTC-Light, sans-serif;
    font-family: PingFangTC-Thin, sans-serif;
    font-family: PingFangTC-Medium, sans-serif;
    font-family: PingFangTC-Semibold, sans-serif;
    
    苹方-港 的 CSS font-family 使用：
    font-family: PingFangHK-Regular, sans-serif;
    font-family: PingFangHK-Ultralight, sans-serif;
    font-family: PingFangHK-Light, sans-serif;
    font-family: PingFangHK-Thin, sans-serif;
    font-family: PingFangHK-Medium, sans-serif;
    font-family: PingFangHK-Semibold, sans-serif;

文字溢出显示省略号

单行文字溢出省略号

/*1. 先强制一行内显示文本 （ 默认为 normal 表示自动换行）*/
 white-space: nowrap; 
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

多行文本溢出省略号

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

CSS 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

CSS 图片属性

改变图片颜色 filter

CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 MDN

filter: none        
    | blur() 
    | brightness() 
    | contrast() 
    | drop-shadow() 
    | grayscale() 
    | hue-rotate() 
    | invert() 
    | opacity() 
    | saturate() 
    | sepia() 
    | url();


<!--html-->
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原图">

filter: none

没有任何效果，默认filter就为none

filter:blur( ) 高斯模糊

给图像一个高斯模糊效果，length值越大，图像越模糊

img {
    filter:blur(2px);;
}

brightness(%) 线性乘法

可以让图片看起来更亮或者更暗

img {
    filter:brightness(70%);
}

contrast(%) 对比度

调整图像的对比度。

img {
    filter:contrast(50%);
}

drop-shadow(h-shadow v-shadow blur spread color)

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速

利用这个方案，我们其实改变类似于一些图标的颜色，比如黑色的图标变成蓝色的图标。

img {
    filter: drop-shadow(705px 0 0 #ccc);
}

hue-rotate(deg) 色相旋转

img {
    filter:hue-rotate(70deg);
}

invert(%) 反转

这个函数的作用是反转输入图像，有点像曝光的效果

img {
    filter:invert(100%)
}

grayscale(%) 将图像转换为灰度图像

这个效果可以将图片做旧，有一种时代沧桑感。喜欢古风的人一定会喜欢上这个效果的

img {
    filter:grayscale(80%);
}

全站变灰

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

sepia(%) 将图像转换为深褐色

img {
    filter:sepia(50%)
}

终极变色解决方案！ filter:url();

filter:url()就是css滤镜改变图片的终极方法。CSS:filter可以导入一个svg滤镜，作为他自己的滤镜。

为什么说filter:url()是图片变色的终极解决方案呢，请容我慢慢道来。

我们先科普一下PS的工作原理，我们都知道网页是有三原色的R(红) G(绿) B(蓝)，常见的RGBA还包括一个opicity值，而opcity值是根据alpha通道计算出来的。也就是说，我们见到的网页的每一个像素点都是由红蓝绿再加alpha四个通道组成，每一个通道我们称之为色板，PS中的8位板的意思就是2的八次方256，意思就是每一个通道的取值范围都是(0-255) SVG 研究之路 (11) - filter:feColorMatrix

如果我们可以改变每个通道的值是不是就能完美的得到我们想要的任意颜色了呢，原理上，我们可以像ps那样利用svg滤镜得到任何我们想要的图像，不仅仅是变色。我们甚至可以凭空生成一幅图像。