前端关于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;
     }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值