常用的一些 CSS 技巧一

时间:2021-6-12 作者:qvyue

你可以看看其他常用的 CSS 技巧:

  • 常用的一些 CSS 技巧二 | 伪类伪元素
  • 常用的一些 CSS 技巧三

CSS3 中的 counter

  • 使用 counter 属性可将任何元素转换为编号列表。类似于有序列表标签的工作方式

      • 定义并初始化计数器 counter-reset: tidbit-counter 19;

      • 增量计数器 counter-increment:

      • 使用 counter(, ) 作为 content 的内容

      • 查看 counter list style 样式的完整列表

    HTML

    CSS

    JS

    css 如下

    div {
      counter-reset: tidbit-counter 19;
    }
    
    h2::before {
      counter-increment: tidbit-counter;
      content: counter(tidbit-counter, thai);
    }
    

    效果如下

    常用的一些 CSS 技巧一
    counter

    使用 CSS white-space 修复文本重叠

    有时 nowrap 会导致文本重叠

    .container {
      display: flex;
    }
    
    div {
      white-space: nowrap;
    }
    
    常用的一些 CSS 技巧一
    nowrap

    我们设置了 nowrap 并没有发送重叠的问题,但当我们给其添加 width 的时候,看看会发生什么情况

    div {
      width: 100px;
    }
    
    常用的一些 CSS 技巧一
    nowrap

    发生这种情况是因为原本的 div 宽度的默认值为 width: auto,这意味着盒子会根据其内容展开。但是,当我们给其一个固定的宽度时,会限制它的增长。文本无处可去,流进了同级框中。

    我们可以通过将设置 white-spacenormal 轻松修复它

    div {
      white-space: normal;
    }
    
    常用的一些 CSS 技巧一
    normal

    Flexbox 居中元素

    使用 CSS Flexbox,能够水平和垂直居中放置某些东西非常简单。标准方法是使用 flex 属性。但是您也可以使用margin来做。

    使用 Flex 属性

    .parent {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    

    使用具有自动 Margin 边距的 Flexbox

    .parent {
      display: flex;
    }
    
    .child {
      margin: auto;
    }
    
    常用的一些 CSS 技巧一
    flex 水平垂直居中

    Gird 居中元素

    .parent {
      display: grid;
    }
    
    .child {
      /* place-items: center center; */
      justify-self: center;
      align-self: center;
    }
    

    gridmargin

    .parent {
      display: grid;
    }
    
    .child {
      margin: auto;
    }
    

    在 CSS 中更改光标颜色

    使用 caret-color 更改光标(尖号)的颜色

    input {
      /* default */
      caret-color: auto;
    }
    
    input {
      /* custom */
      caret-color: DeepPink;
    }
    
    常用的一些 CSS 技巧一
    caret-color

    使非密码输入使用符号替代

    这适用于文本输入(例如 texttextarea 等),但不能更改实际的密码输入。

    password 默认样式

    input {
      -webkit-text-security: disc; /* default */ }
    }
    
    常用的一些 CSS 技巧一
    disc
    input {
      -webkit-text-security: none;
    }
    input {
      -webkit-text-security: circle;
    }
    input {
      -webkit-text-security: square;
    }
    
    常用的一些 CSS 技巧一
    circle
    常用的一些 CSS 技巧一
    square

    CSS user-select 禁用文本选择

    使用 user-select: none 使元素的内容不可选。
    使用 user-select: all 用户只需点击一次选择文本
    如果您试图创建一个简单的文本复制和粘贴体验,这将非常有用👍

    /* 只需单击一次即可选择所有文本 */
    p {
      user-select: all;
    }
    
    /* 禁用文本选择 */
    p {
      user-select: none;
    }
    

    自定义 CSS 选择样式

    CSS ::selection 伪元素使您可以在文本突出显示时将样式应用于文本。

    p::selection {
      background: DeepPink;
      color: white;
    }
    

    对于 Firefox,您将需要使用 ::-moz-selection

    p::-moz-selection {
      background: DeepPink;
      color: white;
    }
    

    CSS 变量

    原生 CSS 支持变量,而无需 sass 预处理器,也无需编译

    你可以在全局范围的任何地方访问变量,而本地作用域将只在特定的选择器中

    全局范围内定义

    /* 所有选择器中都可用 */
    :root {
      --color-red : red;
    }
    
    .text {
      color: var(--color-red);
    }
    
    .text-1 {
      color: var(--color-red);
    }
    

    局部范围内定义

    /* 仅限于.local 类 */
    .local {
      --color-blue: blue;
      color: var(--color); /* blue */
    }
    
    .text {
      color: var(--color-blue); /* 没有效果,找不到改变量 */
    }
    

    text-rendering

    CSS 关于文本渲染的属性 text-rendering 告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性(清晰度)和几何精度方面做一个权衡。

    语法

    text-rendering: optimizeLegibility | auto | optimizeSpeed | geometricPrecision;
    

    auto:浏览器依照某些根据去推测在绘制文本时,何时该优化速度,易读性或者几何精度。对于该值在不同浏览器中解释的差异,请看兼容性表。

    optimizeSpeed:浏览器在绘制文本时将着重考虑渲染速度,而不是易读性和几何精度。它会使字间距和连字无效。Gecko 默认开启该属性,Firefox 是默认 20px 以下开启该属性。

    optimizeLegibility:浏览器在绘制文本时将着重考虑易读性,而不是渲染速度和几何精度。它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题

    geometricPrecision:浏览器在绘制文本时将着重考虑几何精度, 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放,所以该值可以使使用某些字体的文本看起来不错。

    body {
     text-rendering: optimizeLegibility;
    }
    

    text-rendering

    类似原生的 IOS 滚动

    该属性只能在 Safari on iOS 中使用

    -webkit-overflow-scrolling: touch 当手指从触摸屏上移开,会保持一段时间的滚动

    -webkit-overflow-scrolling: auto 当手指从触摸屏上移开,滚动会立即停止

    body {
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
    }
    
    • Scroll Bouncing On Your Websites

    • Momentum Scrolling on iOS Overflow Elements

    蚀刻文字

    创建一种效果,使文本看上去被“蚀刻”或雕刻到背景中。

    • 使用 text-shadow 创建一个白色的影子偏移 0px 水平和 2px 从原始位置垂直。
    • 为了使效果起作用,背景必须比阴影更暗。
    • 文字颜色应略微褪色,使其看起来像是从背景上雕刻/雕刻出来的。
    .etched-text {
      text-shadow: 0 2px white;
      font-size: 1.5rem;
      font-weight: bold;
      color: #b8bec5;
    }
    

    实现文本溢出省略效果

    • 单行文本溢出
    .text-ellipsis {
      width: 250px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
    • 多行文本溢出
    .text-ellipsis {
      width: 250px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    • 定位 + 渐变
    .truncate-text-multiline {
      position: relative;
      overflow: hidden;
      display: block;
      height: 109.2px;
      margin: 0 auto;
      font-size: 26px;
      line-height: 1.4;
      width: 400px;
      background: #f5f6f9;
      color: #333;
    }
    
    .truncate-text-multiline:after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 150px;
      height: 36.4px;
      background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
    }
    
    常用的一些 CSS 技巧一
    溢出省略

    渐变文字

    • backgroundlinear-gradient 值一起使用可为文本元素提供渐变背景。
    • webkit-text-fill-color: transparent 用于透明颜色填充文本。
    • webkit-background-clip: text 用于用文本剪切背景,用渐变背景作为颜色填充文本。
    .gradient-text {
      background: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    常用的一些 CSS 技巧一
    渐变文字

    文本描边效果

    -webkit-text-stroke 为文本字符指定了文本宽 width 和文本颜色 color

    text-stroke-width:设置或检索对象中的文字的描边厚度

    text-stroke-color:设置或检索对象中的文字的描边颜色

    .text {
      -webkit-text-stroke: 3px black;
    }
    
    常用的一些 CSS 技巧一
    文本描边效果
    • 介绍文本笔画

    系统字体堆栈

    使用本机的操作系统字体来接近本机应用程序的感觉。

    • 使用 font-family 定义字体列表。
    • 浏览器会查找每个连续的字体,如果可能的话,会选择第一个字体,如果找不到字体(在系统上或 CSS 中定义),则会退回到下一个字体。
    • -apple-system 是 San Francisco,,在 iOS 和 macOS(而不是 Chrome)上使用。
    • BlinkMacSystemFont 是 San Francisco,在 macOS Chrome 上使用。
    • 'Segoe UI' 在 Windows 10上使用。
    • Roboto 在 Android 上使用。
    • Oxygen-Sans 在带有 KDE 的 Linux 上使用。
    • Ubuntu 用于 Ubuntu (所有变体)。
    • Cantarell 在带有 GNOME Shell 的 Linux 上使用。
    • 'Helvetica Neue'Helvetica在 macOS 10.10 及更低版本上使用。
    • Arial 是所有操作系统广泛支持的字体。
    • 如果不支持其他字体,sans-serif 是后备无衬线字体。
    .system-font-stack {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
        sans-serif;
    }
    

    叠纸效果

    .paper {
      background: #fff;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee,
        0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee,
        0 20px 1px -9px rgba(0, 0, 0, 0.15);
      padding: 30px;
    }
    
    常用的一些 CSS 技巧一
    1616679548(1).jpg

    隐藏数字输入微调器

    ::-webkit-inner-spin-button CSS 伪元素用于设置数字选择器 元素的微调器按钮内部的样式。

    ::-webkit outer spin button 设置外部样式

    -webkit-appearance:改变按钮和其他控件的外观,使其类似于原生控件。

    ::-webkit-inner-spin-button::-webkit outer spin button-webkit-appearance 都是不规范的属性,它们没有出现在 CSS 规范草案中。有些浏览器不支持或渲染效果不同。

    -webkit-appearance:none | button | button-bevel ....
    
    常用的一些 CSS 技巧一
    数字选择器

    从视觉上隐藏数字选择器 元素的微调器:

    input[type='number']::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    常用的一些 CSS 技巧一
    数字选择器

    appearance

    发光的蓝色输入亮点

    input[type='text'],
    textarea {
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid #dddddd;
      outline: none;
      transition: all 0.3s ease-in-out;
    }
    
    input[type='text']:focus,
    textarea:focus {
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid rgba(81, 203, 238, 1);
      box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    }
    
    常用的一些 CSS 技巧一
    发光的输入框

    非表单 fieldset 外观

    This is not a fieldset

    Booyah!

    CSS 如下:

    .fieldset {
      position: relative;
      border: 1px solid #ddd;
      padding: 10px;
    }
    .fieldset h1 {
      position: absolute;
      top: 0;
      font-size: 18px;
      line-height: 1;
      margin: -9px 0 0; /* half of font-size */
      background: #fff;
      padding: 0 3px;
    }
    
    常用的一些 CSS 技巧一
    fieldset

    将 WebKit 的文件上传输入按钮强制向右移动

    input[type='file'] {
      -webkit-appearance: none;
      -webkit-rtl-ordering: left;
      padding: 10px;
      border: 1px solid #3e68ff;
      border-radius: 8px;
      text-align: left;
    }
    input[type='file']::-webkit-file-upload-button {
      -webkit-appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.25em 0.75em;
      margin: 0;
      float: right;
      border: none;
      background-color: transparent;
      cursor: pointer;
      min-width: 10ch;
      min-height: 44px;
      line-height: 1.1;
      background-color: #3e68ff;
      color: #fff;
      border-radius: 8px;
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
    }
    
    常用的一些 CSS 技巧一
    上传文件按钮右移

    简单而漂亮的 Blockquote 样式

    blockquote {
      background: #f9f9f9;
      border-left: 10px solid #ccc;
      margin: 1.5em 10px;
      padding: 1em 10px;
      quotes: '201C''201D''2018''2019';
    }
    blockquote:before {
      color: #ccc;
      content: open-quote;
      font-size: 4em;
      line-height: 0.1em;
      margin-right: 0.25em;
      vertical-align: -0.4em;
    }
    blockquote p {
      display: inline;
    }
    
    常用的一些 CSS 技巧一
    1616672997(1).jpg

    使用纯 CSS 创建三角形

    .triangle {
      width: 0;
      height: 0;
      border-top: 20px solid #9C27B0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
    }
    
    常用的一些 CSS 技巧一
    三角形

    重置所有样式

    仅使用一个属性将所有样式重置为默认值。

    • 使用该all属性将所有样式(继承或不继承)重置为其默认值。
    • 注意:这不会影响 directionunicode-bidi属性。
    .reset-all-styles {
      all: initial;
    }
    
    声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。