这篇文章用于自己记录自己工作中会遇到但是有容易忘记的东西,有些支持度并不高
控制placeholder的样式
::-webkit-input-placeholder{}
/* 默认placeholder颜色透明不可见,跟上面的区别没做测试,一直用的上面那个 */
.input-control:placeholder-shown::placeholder {
color: transparent;
}
:focus-within伪类选择器,当前元素或者当前元素的子元素处于focus状态的样式
主要用于输入界面有动画时使用
给返回顶部的a标签添加href="#",实现非js滚动回顶部动画
html,body{ scroll-behavior: smooth; }
流畅滚动,具体原理自行查询
-webkit-overflow-scrolling: touch;
文字渐变
-webkit-background-clip: text;
color: rgba(0,0,0,.01);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f06332), color-stop(0.6,#f06332), to(#bb4532));
-webkit-font-smoothing: antialiased; //字体抗锯齿
移动端字体大小无法调节
-webkit-text-size-adjust: 100%|none;
键盘聚焦时控制的样式
:focus-visible{}
用于图像,特殊图形相关的布局(延图像周边排列文字时使用)
shape-outside