常用css

收集常用的css

清除浮动😝

/*清除浮动*/
.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
    display: block;
}

.clearfix {
    zoom: 1; /*IE浏览器*/
}

伪元素🤠

属性	描述
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容
:after	在元素之后添加内容

伪类

属性	描述
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式
:last-child	向元素的最后一个子元素添加样式
:nth-child(n)	向元素的第n个子元素添加样式

选择器	描述
[attribute=value]	选择 attribute="value" 的所有元素

display: none;/*会使整个块消失*/

visibility: hidden;/*会使内容消失，但是会占位置*/

list-style: none;/*去掉列表标签前面的小圆点*/

text-decoration: none;/*恢复文本默认样式,去除a标签的下划线*/

border-­style: 设置边框的样式

border-­style: none; 默认值没有边框

border-­style: solid; 实线边框

border-­style: dotted; 点线

border-­style: dashed; 虚线

border: 0 none; /*去除边框*/

outline­-style: none;/*去除轮廓线*/

overflow: visible; 默认值 超出部分也会显示

overflow: hidden; 将超出部分进行隐藏

overflow: scorll 添加滚动条

overflow: auto自动添加滚动条

letter-spacing: 10px;/*字间距*/

resize: none;/*文本域不可以拉伸*/

background-image: linear-gradient(direction, color-stop1, color-stop2, ...); /* 背景颜色渐变 */

direction	用角度值指定渐变的方向（或角度）。

color-stop1, color-stop2,...	用于指定渐变的起止颜色。

box-shadow: inset offset-x offset-y blur-radius spread-radius color

取值说明：

-- inset: 默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。也有些人喜欢把这个值放在最后，浏览器也支持。

-- <offset-x> <offset-y>: 这是头两个 <length>值，用来设置阴影偏移量。
   <offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 
   <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length>。
   如果两者都是0，那么阴影位于元素后面。
   这时如果设置了 <blur-radius> 或 <spread-radius> 则有模糊效果。

-- <blur-radius>: 这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。

-- <spread-radius>: 这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。

-- <color>: 如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

text-indent:10px; 文字缩进

background: conic-gradient(pink 0, pink 20%, #fff 20%, #fff 100%); 角向渐变


设置黄色背景变成白色背景：

input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px white inset !important;
}  
input:-webkit-autofill:focus {
 box-shadow: 0 0 0px 1000px white inset !important;
}  

设置透明：
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
}