css属性记录

控制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;  //字体抗锯齿

移动端字体大小无法调节

(只对chrome27.0 版本以下有效,27.0以上版本无效;只对英文才有效,对中文无效。在新版的chrome中,已经禁止了改属性,建议使用CSS3中的方法:transform:scale(0.875);当使用transform:scale(0.875)时; 不仅是文字变小了,整个文字所在的容器也同时会变小。)

-webkit-text-size-adjust: 100%|none;

键盘聚焦时控制的样式

:focus-visible{}

用于图像,特殊图形相关的布局(延图像周边排列文字时使用)

shape-outside

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。