CSS工具

自动换行

p {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}

<style>
.breakText {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  width: 400px;
  margin: 0 auto;
  box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
}
</style>
<div class="breakText">作为前端开发者，你是否希望在编写 CSS 样式时更高效、更轻松？本文将为你介绍一些实用的 CSS 工具，帮助你提升样式效果并加速开发过程。
</div>

按钮disabled enable样式

.btn:not([disabled]) {
  background-color: rgba(118,58,255,1);
  color: #fff;
}
.btn[disabled] {}

<style>
.demobtn:not([disabled]) {
  background-color: rgba(118,58,255,1);
  color: #fff;
}
.demobtn[disabled] {
  background-color: #ccc;
  color: #999;
}
</style>

<div>
<button class="demobtn">我是按钮</button>
<button class="demobtn" disabled>我是按钮</button>
</div>

textarea给placeholder设置颜色

.feedbackcontent::-webkit-input-placeholder{color:red;}
</style>
<textarea class="feedbackcontent" placeholder="hello world"></textarea>

<style>
.feedbackcontent::-webkit-input-placeholder{color:red;}
</style>
<textarea class="feedbackcontent" placeholder="hello world"></textarea>

禁止拼写检查

<input spellCheck="false" autoComplete="off" autocorrect="off" autofocus="off" />

<input spellCheck="false" autoComplete="off" autocorrect="off" autofocus="off" />

手机端鼠标点击出现蓝色背景

-webkit-tap-highlight-color:transparent;

格子背景

<style>
.grid-background {
    background-color: #fff;
    color: red;
    font-size: 50px;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg,rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 20px 20px;
    background-position: center center;
    height: 200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="grid-background">hello world</div>

滚动条样式

<style>
.diy-scrollbar-style{
    height: 200px;
    width: 100%;
    background: #fff;
    overflow-y: auto;
}
.diy-scrollbar-style::-webkit-scrollbar {
  width: 6px;
}
.diy-scrollbar-style::-webkit-scrollbar-track {
  border-radius: 3px;
  background: #eee;
  box-shadow: inset 0 0 5px #eee;
}
.diy-scrollbar-style::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0,0,0,0.12);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}
.diy-scrollbar-style-content {
    height: 300px;
    width: 100%;
    background-color: #efefef;
}
</style>
<div class="diy-scrollbar-style">
    <div class="diy-scrollbar-style-content"></div>
</div>

禁止文本选中

.noselect{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<style>
.noselect{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
<div class="noselect">你不能选中我</div>

文本超长显示省略号

.mutl-line-title {
  display: -webkit-box;
  word-wrap: break-word;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

<style>
.mutl-line-title {
  display: -webkit-box;
  word-wrap: break-word;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
<div class="mutl-line-title">
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；
大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红妆素裹，分外妖娆。

江山如此多娇，
引无数英雄竞折腰。
惜秦皇汉武，略输文采；
唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝。一文读懂分布式架构知识体系（内含超全核心知识大图）一文读懂分布式架构知识体系（内含超全核心知识大图）</div>

纯css鼠标控制列表折叠

<style>
.auto-scroll-height .auto-scroll-height-list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #fff;
    color: #000;
}
.auto-scroll-height:hover .auto-scroll-height-list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
</style>

<div class="auto-scroll-height">
    <p>hover me</p>
    <ul class="auto-scroll-height-list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

tooltips箭头

<style>
.tooltips {
    position: relative;
    width: 63px;
    height: 45px;
    background: #515151;
    border-radius: 14px;
}
.tooltips > * {
    margin: 0;
    padding:0;
}
.tooltips-content {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.tooltips-arrow {
    position: absolute;
    left: 29px;
    top: 45px;
    transform-origin: 0 0;
    transform: translateX(-50%) rotate(-45deg);
    border-color: transparent transparent #fff #fff;
    filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, .1));
    width: 0;
    height: 0;
    overflow: hidden;
    border: 5px solid #515151;
    border-right-width: 5px;
    border-left-width: 5px;
}

.tooltips-demo {
    padding: 50px 20px;
}
</style>
<div class="tooltips-demo">
    <div class="tooltips">
        <div class="tooltips-content">复制</div>
        <div class="tooltips-arrow"></div>
    </div>
</div>

圆角边框渐变

<style>
.app {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: #ccc;
  border: solid 1px transparent;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, green, gold);
  border-radius: 50px;
  background-origin: border-box;
  background-clip: content-box, border-box;
}
</style>
<div style="padding: 20px;">
  <div class="app"></div>
</div>