前端关于html+css的些些技巧

样式重置库 normalize.css

Normalize.css在默认的HTML元素样式上提供了跨浏览器的高度一致性。
支持包括手机浏览器在内的超多浏览器。
link直达

css filter过滤属性

疫情期间，哀悼日网站变成灰色，前端如何实现的呢？
filter grayscale 一行代码即可

body>*{
 	/* 滤镜效果 */
    filter: grayscale(100%);
    /* webkit内核 */
    -webkit-filter: grayscale(100%);
    /* 火狐内核 */
    -moz-filter: grayscale(100%);
    /* 微软内核 */
    -ms-filter: grayscale(100%);
    /* 欧朋内核 */
    -o-filter: grayscale(100%);
    /* ie专有滤镜 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
 }

常用属性

• filter: invert() — 是从0到1的刻度，1是从白变黑。
• filter: hue-rotate() —色调旋转，属性的值可以从0deg到360deg。

// 底色旋转 实现换肤
html {
  background: #fff;
}

body {
  background: #fff;
  filter: invert(1) hue-rotate(260deg);
}

// 渐变效果
.colourBox {
    animation: pulse 5s linear infinite;
}
@keyframes pulse {
    from { filter: hue-rotate(0); }
    to { filter: hue-rotate(360deg); }
}

多行文本溢出隐藏

// 单行文本
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

// 多行文本
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 行数
-webkit-box-orient: vertical;

字体大小10px

font-size:10px;
-webkit-transform:scale(0.8);

样式穿透

平常项目很容易用到ui框架，样式穿透使用scoped限制也可以修改框架样式。

<style lang="less" scoped>
// 使用 css 时可以用 >>> 进行样式穿透
.test-wrapper >>> .ant-select {
    font-size: 16px;
}

// 使用 scss, less 时，可以用 /deep/ 进行样式穿透
.test-wrapper /deep/ .ant-select {
    font-size: 16px;
}
</style>

flex实现换行平均分布

ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap; // 元素自动换行
    li {
      flex: 1;
      width: 25%;
      min-width: 25%;
      max-width: 25%;
     }
｝

font属性的快捷写法

body {
　font: font-style font-variant font-weight font-size line-height font-family;
}

link状态的设置顺序

　button:link
　button:link:visited
　button:link:hover
　button:link:active

hover视觉层换图

// html
< img src=" xx. png"> 

// css
img: hover { 　
     content: url( xx. png);
 }

增加icon按钮热点区域

div{ 　
     width: 20px; 　 
     height: 20px; 　 
     border: 10px solid transparent; // 一行代码搞定
}

高性能图形绘制

// 等边三角形
div { 　
      width: 16px; 　 
      height: 16px; 　 
      border: 10px solid transparent; 　 /**key code here**/
    }

// 等腰三角形
div {
      width: 0;
      border: 10px solid;
      border-color: #ccc transparent transparent;
    }
   
 //梯形
 div {
       width: 0;
       border-width: 20px 10px;
       border-style: solid;
       border-color: #ccc #ccc transparent transparent;
     }