Innei/index.html

## index.html
<!--
 * @Author: Innei
 * @Date: 2020-09-06 19:04:12
 * @LastEditTime: 2020-09-06 19:54:21
 * @LastEditors: Innei
 * @FilePath: /mask/index.html
 * @Coding with Love
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Mask Chrome Tab</title>
  </head>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
    .rect {
      height: 10px;
      width: 100vw;
      background-image: linear-gradient(to right, #000 80%, #fff);
    }
    .mask {
      -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 80%,
        transparent
      );
      mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, transparent);
    }
    html {
      font-size: 14px;
      line-height: 3;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .tab-wrap {
      padding: 0 2em 0 1em;
      position: relative;
      width: 300px;
      /* height: 12px; */
      border-radius: 6px 6px 0 0;
      background-color: #333333;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(255, 255, 255, 0.8);
      display: inline-block;
    }
    .tab-wrap .tab {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tab .tab-text {
      white-space: nowrap;
    }
    .tab-wrap .close {
      position: absolute;
      right: 0;
      width: 2em;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cursor {
      user-select: none;
      cursor: default;
    }
    @supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
      .tab-wrap .tab {
        text-overflow: clip;
        -webkit-mask-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 1) calc(100% - 2em),
          transparent
        );
        mask-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 1) calc(100% - 2em),
          transparent
        );
      }
    }
  </style>
  <body>
    <div class="tab-wrap">
      <div class="tab">
        <span class="tab-text cursor"
          >一个标题很长的标签 一个标题很长的标签 一个标题很长的标签
          一个标题很长的标签</span
        >
      </div>
      <div class="close cursor">×</div>
    </div>

    <div class="tab-wrap">
      <div class="tab">
        <span class="tab-text cursor">一个标签</span>
      </div>
      <div class="close cursor">×</div>
    </div>
  </body>
</html>
	<!--
	* @Author: Innei
	* @Date: 2020-09-06 19:04:12
	* @LastEditTime: 2020-09-06 19:54:21
	* @LastEditors: Innei
	* @FilePath: /mask/index.html
	* @Coding with Love
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>CSS Mask Chrome Tab</title>
	</head>
	<style>
	html,
	body {
	margin: 0;
	padding: 0;
	}
	.rect {
	height: 10px;
	width: 100vw;
	background-image: linear-gradient(to right, #000 80%, #fff);
	}
	.mask {
	-webkit-mask-image: linear-gradient(
	to right,
	rgba(0, 0, 0, 1) 80%,
	transparent
	);
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, transparent);
	}
	html {
	font-size: 14px;
	line-height: 3;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
	Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	.tab-wrap {
	padding: 0 2em 0 1em;
	position: relative;
	width: 300px;
	/* height: 12px; */
	border-radius: 6px 6px 0 0;
	background-color: #333333;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(255, 255, 255, 0.8);
	display: inline-block;
	}
	.tab-wrap .tab {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	.tab .tab-text {
	white-space: nowrap;
	}
	.tab-wrap .close {
	position: absolute;
	right: 0;
	width: 2em;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.cursor {
	user-select: none;
	cursor: default;
	}
	@supports (-webkit-mask-image: inherit) or (mask-image: inherit) {
	.tab-wrap .tab {
	text-overflow: clip;
	-webkit-mask-image: linear-gradient(
	to right,
	rgba(0, 0, 0, 1) calc(100% - 2em),
	transparent
	);
	mask-image: linear-gradient(
	to right,
	rgba(0, 0, 0, 1) calc(100% - 2em),
	transparent
	);
	}
	}
	</style>
	<body>
	<div class="tab-wrap">
	<div class="tab">
	<span class="tab-text cursor"
	>一个标题很长的标签一个标题很长的标签一个标题很长的标签
	一个标题很长的标签</span
	>
	</div>
	<div class="close cursor">×</div>
	</div>

	<div class="tab-wrap">
	<div class="tab">
	<span class="tab-text cursor">一个标签</span>
	</div>
	<div class="close cursor">×</div>
	</div>
	</body>
	</html>