01web字体
@font-face {
font-family: 'webfont';
src: url('fonts/webfont.eot');
/* IE9*/
src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('fonts/webfont.woff') format('woff'),
/* chrome、firefox */
url('fonts/webfont.ttf') format('truetype'),
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('fonts/webfont.svg#webfont') format('svg');
/* iOS 4.1- */
}
.web-font {
font-family: "webfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
<!--
1.得自定义想生成对应字体文件得内容
2.使用网络资源生成web字体
3.使用
a.定义自定义字体
b定义样式使用得自定义字体
c. 指定样式 调用样式
-->
02字体图标
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1544494251465'); /* IE9*/
src: url('iconfont.eot?t=1544494251465#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRg、、、')
format('woff'),
url('iconfont.ttf?t=1544494251465') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1544494251465#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
03背景样式
/* 1.添加背景颜色 */
/* background-color: skyblue; */
/* 添加背景图片 */
/*
1.如果图片大于容器 那么默认就从容器左上角开始放置
2.如果图片小于容器 那么图片默认就会平铺
*/
/* background-image: url("images/bg-img.jpg"); */
background-image: url("images/share1.png");
/* 3.设置背景平铺 */
/*
round：会将图片进行缩放后平铺
space: 不会缩放平铺 只是会在图片之间产生相同得间距值
*/
/* background-repeat:no-repeat; */
/* 4.设置在滚动容器得背景得行为 跟随滚动/固定 */
/* fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片不会跟随滚动*/
/* local和scroll的区别：前提是滚动当前容器的内容 */
/* local:背景图片会跟随内容一起滚动
scroll:背景图片不会跟随内容一起滚动 */
background-attachment: scroll;
04background-size
/* 添加背景 */
/* background-image: url("images/bg-img.jpg"); */
background-image: url("images/share1.png");
background-repeat: no-repeat;
/*设置背景图片的大小 宽度/高度 宽度/auto(保持比例自动缩放) */
/* 建议：在使用这个属性之前衔确定宽高比与容器的宽高比是否一致，否则会造成图片失真变形 */
/* background-size: 500px 500px; */
/* background-size:500px; */
/* 设置百分比 是参照父容器可放置内容区域的百分比 */
/* background-size: 50% 50%; */
/*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内
1.图片大于容器：有可能造成容器的空白区域,将图片缩小
2.图片小于容器：有可能造成容器的空白区域，将图片放大*/
/*cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出
1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/
background-size:cover;
05background-size使用
background: url("images/slide_01_2000x410.jpg");
/* 设置背景图片得大小 */
background-size: cover;
/* 设置position */
background-position: center;
06background-origin-background-clip
background-position: -20px 0;
/*设置背景偏移，参照background-origin原点，这个原点默认在容器的左上角*/
/*设置背景坐标的原点
border-box:从border的位置开始填充背景，会与border重叠
padding-box:从padding的位置开始填充背景，会与padding重叠
content-box:从内容的位置开始填充背景*/
background-origin:content-box;
/*设置内容的裁切:设置的是裁切，控制的是显示
border-box:其实是显示border及以内的内容
padding-box:其实是显示padding及以内的内容
content-box:其实是显示content及以内的内容*/
background-clip: content-box;
07边框图片
/* padding: 27px; */
/*添加边框图片*/
/*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/
/* border-image-source: url("images/border1.png"); */
/*让它成为九宫格：border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充 问题：如果分别设置1，2，3，4个值代表什么意思*/
/* border-image-slice: 27; */
/*border-image-width:边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
细节：1.边框图片的本质是背景，并不会影响元素内容的放置 2.内容只会被容器的border和padding影响
建议：一般将值设置为原始的边框的宽度*/
/* border-image-width: 27px; */
/*border-image-outset:扩展边框*/
/* border-image-outset: 0px; */
/*border-image-repeat:
repeat:直接重复平铺
round:将内容缩放进行完整的重复平铺*/
/* border-image-repeat: round; */
/*缩写：*/
/*border-image: source slice / width/outset repeat;*/
border-image: url("images/border1.png") 27 / 22px /0px round;
08边框图片实战
/* 添加边框图片 */
border-image-source:url("images/btn_bg.png");
border-image-slice: 10 fill;
border-image-width: 10px;
border-image-repeat: stretch;
09线性渐变
/* 其实生成的背景 就是一张图片 */
/* background-image:linear-gradient(red,pink,black,purple,yellow); */
/* background-image:linear-gradient(to right,red,pink,black,purple,yellow); */
/* background-image:linear-gradient(90deg,red,pink,black,purple,yellow); */
background-image:linear-gradient(to right,red 10%,pink 20%,blue 70%);
}
/* 线性渐变 从上到下（默认）
用这个渐变 尽量用到 background-image属性下面 兼容好
支持多个颜色渐变
支持方位和角度去改变我们的渐变的方向
*/
10径向渐变
.circle{
/* background-image: radial-gradient(circle,orange,green,purple,red); */
/* background-image: radial-gradient(circle at right,orange,green,purple,red); */
/* background-image: radial-gradient(circle at top,orange,green,purple,red); */
/* background-image: radial-gradient(circle at left top,orange,green); */
background-image: radial-gradient(20px circle at center,orange,green);
/* 20px 指的是半径 */
}
.ellipse{
/* background-image: radial-gradient(ellipse,orange,green,purple,red); */
/* background-image: radial-gradient(ellipse at right,orange,green,purple,red); */
/* background-image: radial-gradient(ellipse at top,orange,green,purple,red); */
/* background-image: radial-gradient(ellipse at left top,orange,green); */
background-image: radial-gradient(20px 30px ellipse at center,orange,green);
/* 椭圆它有两条半径 x和y 短半径和长半径 */
}
/*
径向渐变：从圆心向外面渐变
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
*/
11重复性渐变
background-image: repeating-linear-gradient(red 0px,green 30px, orange 40px);
background-image: repeating-radial-gradient(red 0px,green 30px, orange 40px);
12过渡transition
transition-property: all;
/* 过度的属性 width,height all */
transition-duration: 5s;
/* 过度的时间 */
transition-delay: 2s;
/* 过度延迟时间 */
transition-timing-function: linear; /* 默认ease */
/* transition: all 5s 2s linear; */
13transform二维的变换
/* 移动translate */
div:first-of-type:active{
/*
1.如果只有一个参数代表x轴
2.如果有2个参数代表x轴/y轴
*/
/* transform: translate(0px,500px); */
/* 添加水平或者垂直方向上的移动 */
transform: translateY(300px)
}
/* 缩放： scale */
div:nth-of-type(2):active{
/* 实现缩放 1指的是不缩放 大于1放大 小于1就是缩小
1.如果只有一个参数 就代表x和y方向上都进行了相等比例的缩放
2.如果有2个参数 就代表x/y方向
*/
/* transform: scale(2); */
/* transform: scale(2,1); */
/* 指定方向的缩放 */
transform: scaleX(2);
}
/* 旋转 rolate */
div:nth-of-type(3){
/* 设置一个旋转的轴心 如果不给轴心 默认以中心为轴心*/
background-color: purple;
transform-origin: left top;
}
div:nth-of-type(3):active{
transform: rotate(-90deg);
/* transform: translateX(700px); */
/*同时添加多个transform属性值*/
transform:translateX(700px) rotate(-90deg) ;
/* transform: rotate(-90deg) translateX(700px) ; */
}
/* 斜切 skew*/
div:nth-of-type(4):active{
background-color: blue;
/*如果角度为正，则往当前轴的负方向斜切，如果角度为负数，则往当前轴的正方向斜切*/
/* transform: skew(-30deg); */
transform: skew(30deg,-30deg);
/* 设置某个方向的斜切 */
/* transform: skewY(-30deg); */
}
14旋转轴心实战
/* 设置旋转轴心 */
transform-origin: right top;
15多个transform属性作用
transform: translate(100px,100px) rotate(30deg);
16transform三维变换
/*添加过渡*/
transition: transform 2s;
}
/* 添加三维移动 3D移动 */
div:first-of-type:active{
/*translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)*/
/* transform: translate3d(400px,0,0); */
transform: translate3d(400px,400px,0);
/* transform: translate3d(20px,20px,20px); */
}
/* 三维缩放 */
div:nth-of-type(2):active{
/*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)*/
transform: scale3d(1,1,10);
}
/*添加三维旋转*/
div:nth-of-type(3):active{
/*rotate3d(x,y,z,angle):
x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值*/
transform: rotate3d(0,0,1,45deg);
/* 4个参数，前三个，对应x,y,z 轴，是表示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。 */
}
17perspective
/* 开启3D */（给父类开）
perspective: 500px;
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
