前端沙滩

Appearance

本页内容

CSS ​

内容生成 - 计数器 ​

html
<style>
    ul {
        counter-reset: count;
    }
    ul li {
        counter-increment: count;
    }
    ul li::before {
        content: "[" counter(count) "] == [" counter(count, upper-roman) "] ";
    }
</style>

<ul>
    <li>111</li>
    <li>222</li>
</ul>

设置容器的纵横比 ​

css
img, input[type="image"], video, embed, iframe, marquee, object, table {
  aspect-ratio: attr(width) / attr(height);
}

修改编辑时光标颜色 ​

css
input {
    caret-color: red;
}

修改 CheckBox Radio Range Progress 的强调色 ​

css
/* 修改复选框勾选时的颜色 */
input.custom {
  accent-color: rebeccapurple;
}

修改选中文本的高亮样式 ​

::selection CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

修改输入框占位文本的样式 ​

伪元素 ::placeholder 可以选择一个表单元素的占位文本，自定义占位文本的样式。

修改ul或ol列表的的项目符号样式 ​

通过伪元素 ::marker

修改 type="file" 的 input 的按钮样式 ​

::file-selector-button

css
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

半透明模糊效果 ​

css
backdrop-filter: saturate(100%) blur(8px);
background: rgba(255,255,255,.7)

​