form伪类

Posted 2020-12-30 rose1jj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了form伪类相关的知识，希望对你有一定的参考价值。

input[type=”text”]:focus{

该选择器代表的意思是输入框被选中的状态

:focus输入框获得焦点的状态即输入框被选中的状态

}

去除标签的外轮廓：outline:none;
把输入框设置成禁用状态：input[type=”text”]:disabled{}
属性选择器：根据标签指定的属性获取对应的标签
结构选择器：

标签1+标签2：相邻兄弟选择器，选择标签1下面的和标签1相邻的标签。如果该标签是标签2此时应用样式。如果不是则不使用

div:nth-child(2n-1){}获取指定位置的标签，如果该标签是我们需要查找的div，此时应用样式，如果不是则不应用；注意，参数可以是具体的数字，也可以是由n组成的表达式，n默认从0开始，每次增加1，直至将所有满足的且位置满足的标签应用样式
:root{}选择根标签
:target{}选择用户点击的锚点
Background:url();设置标签的背景颜色或背景图片，该css样式是一种复合写法，分别设置标签背景的颜色，图片和重复方式
Background-size:设置图片的背景尺寸，可以是指定的像素值，也可以是百分比，或者是系统内置的值

cover:图片进行等比例缩放直到图片完全覆盖整个标签

contain:图片进行等比例缩放，直到图片某一方向盛满整个标签

background-position设置背景图片的位置，该样式基于定位实现，第一个值为水平方向位置，第二个值为竖直方向的位置。注意，如果两个值为百分比，此时计算机计算时按照图片宽度和标签宽度的差值进行计算
background-clip:content-box;

border-box:从边框边界处裁剪（默认值）

padding-box:从内边距位置处裁剪

content-box:从内容层位置处裁剪

蒙版：用来通过一些特定的png图片设置一些特定的外观样式，注意png素材中之前透明的部分在蒙版中是不透明的，不透明的是透明的

-webkit-mask-image:url();设置蒙版的图片

-webkit-mask-repeat:no-repeat;设置蒙版是否重复

-webkit-mask-size:100% 100%;设置蒙版的尺寸

-webkit-mask-position:-100px -100px;设置蒙版的显示位置

14. background:linear-gradient(to bottom,red 80%, yellow);线性渐变

15. background:radial-gradient(circle,red, yellow，blue);径向渐变

16. –webkit-filter:grayscale(50%);将图片转换成灰度图

Sepia（）：将图片转换成褐色图

Saturate():转换图片的饱和度

Opacity():转换图片的透明度

Blur(px):调整图片的高斯模糊度

17. transition:all 2s 1s linear;此种写法可以保证所有css样式的改变都会产生动画，并且动画是同时执行的，参数1指代样式，参数2指代动画运行的时间；参数3代表动画延迟执行的时间；参数4代表动画运行的速度（linear：匀速；ease-out:速度逐渐变慢；ease-in-out:速度先快慢；ease-in：速度逐渐变快）

18．Translate(200px,100px)平移变换，参数分别代表水平和竖直方向的平移，如果为百分比此处平移量相对于标签自身的宽度和高度进行计算

19. tranform-origin:center center;修改变换的基准点

20. transform:skew(90deg);变换分为平移变换（translate）,旋转变换（rotate）,缩放变换（scale）,倾斜变换（skew）,四种变化可以随机组合

21. 开启3D渲染模式。该方式只会让当前标签中所有子级元素获得3D渲染

Transform-style:preserve-3d;

22. 设置人眼和3D物体的位置：perspective:1000px;

23. 设置人眼观察3D物体的位置：perspective-origin:center bottom;

24. animation:move 2s 5s linear alternate infinite;绑定动画;

参数1需要绑定的关键帧动画的名字

参数2：一次动画需要运行的时间

参数3：动画延迟执行的时间

参数4：动画播放的速度