36、文字渐变效果实现
divclass="text_signature"有课前端网，一个专门学习前端知识的网站/div
style
.text_signature{
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-image:linear-gradient(toright,#ec,#40a4e2,#ea96f5);
width:px;
}
/style
37、好看的边框
divclass="text_shadow"/div
style
.text_shadow{
width:px;
height:px;
box-shadow:0px0px13px1pxrgba(51,51,51,0.1);
}
/style
38、外观的渐变
divclass="text_gradient"/div
style
.text_gradient{
width:px;
height:px;
background:linear-gradient(25deg,rgb(79,,),rgb(98,,),rgb(,,),rgb(92,,))rgb(,,);
}
/style
39、实现立体字的效果
divclass="text_solid"爱创课堂，一个专门学习前端知识的网站/div
style
.text_solid{
font-size:32px;
text-align:center;
font-weight:bold;
line-height:px;
text-transform:uppercase;
position:relative;
background-color:#;
color:#fff;
text-shadow:
0px1px0px#c0c0c0,
0px2px0px#b0b0b0,
0px3px0px#a0a0a0,
0px4px0px#,
0px5px10pxrgba(0,0,0,0.6);
}
/style
40、全屏背景图片的实现
.swper{
background-image:url(./img/bg.jpg);
width:%;
height:%;//父级高不为%请使用vh
zoom:1;
background-color:#fff;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-position:center0;
}
41、实现文字描边的2种方法
方式一：
.stroke{
-webkit-text-stroke:1pxgreenyellow;
text-stroke:1pxgreenyellow;
}
方式二：
.stroke{
text-shadow:#px00,#0px0,#-1px00,#0-1px0;
-webkit-text-shadow:#px00,#0px0,#-1px00,#0-1px0;
-moz-text-shadow:#px00,#0px0,#-1px00,#0-1px0;
*filter:Glow(color=#,strength=1);
}
42、水流的实现
.dom{
opacity:0.4;
filter:alpha(opacity=40);/*IE8及其更早版本*/
}
使用rgba()设置颜色颜色
.demo{
background:rgba(,0,0,1);
}
说明：RGBA是代表红色（红色）绿色（绿色）蓝色（蓝色）和Alpha（不知道）三个字母的缩写。
43、解决1px边框变粗的问题
.dom{
height:1px;
background:#dbdbdb;
transform:scaleY(0.5);
}
Ps：出现1px变粗的原因，比如在2倍屏时1px的像素对应2个物理像素。
44、CSS不同的单位的大脑
css自己也能够进行简单的运算，主要是实现了计算这个函数。
.div{
width:calc(%-50px);
}
45、CSS实现文字模糊
.vague_text{
color:transparent;
text-shadow:#115px;
}
46、通过彩色图标变灰
一张彩色的图片实现了，移出变灰的效果。
ahref=class=iconimgsrc=01.jpg//a
style
.icon{
-webkit-filter:grayscale(%);
-moz-filter:grayscale(%);
-ms-filter:grayscale(%);
-o-filter:grayscale(%);
filter:grayscale(%);
filter:gray;
}
.icon:hover{
filter:none;
-webkit-filter:grayscale(0%);
}
/style
47、图片object-fit
当图片带不固定时间，想要让图片整体，一般都用background-size:cover/contain，但这个只适用于背景图。缩放的问题。使用的提前条件：图片的父级容器宽高。
img{
width:%;
height:%;
object-fit:cover;
}
填充：默认值。内容拉伸填满整个内容框，不保证保持原有的比例。
包含：边保持边长和长度中的那条长度，等比缩放，可能会留白。
封面：保持原有的空间长度。宽度和高度中长度一致，长的部分等比缩放。可能部分区域不可见。（经常）
无：保持原有的保留比例。保持同时替换内容的原始尺寸大小。
按比例缩小：保持原有尺寸大小，如果容器尺寸较大，图片内容尺寸不变，保持图片的尺寸不变，不会放大缩小；容器尺寸较小的图片内容尺寸不变，最能容纳。
48、行内标签元素出现空白问题
方式一：父级font-size设置为0
.father{
font-size:0;
}
方式二：父元素上设置word-spacing的有合适的值
.father{
word-spacing:-2px
}
其他方案：1将行内元素写为1行（会影响布局）；2行（会影响布局）。
49、解决vertical-align属性不生效
在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。
作用环境：父元素设置line-height。需要和高度一致。将显示属性设置为表格单元，将块元素转化为单元格。
作用对象：子元素中的inline-block和inline元素。
divclass="box"
imgsrc=".\test.jpg"/
span内部文字/span
/div
style
.box{
width:px;
line-height:px;
font-size:16px;
}
.boximg{
width:30px;
height:30px;
vertical-align:middle
}
.boxspan{
vertical-align:middle
}
/style
Ps：垂直对齐不可继承，必须对子元素单独设置。同时需要注意的是线高的高度基于字体大小（即字体的高度），如果文字要转行会出现异常哦。