边框的知识点:
1.border-radius:
border-radius设置的值越大,弧度越大,可以用具体数值10px来设置,也可以用20% 百分比来设置;你也可以只设置一个或其中几个角的弧度,就像这样:
div{
width:100px;
height: 100px;
border:1px solid #333;
/*border-radius: 20px;*/
border-bottom-right-radius: 20px;
}
2.box-shadow:
用来设置一个下拉阴影得框,语法如下:
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 说明 |
---|---|
h-shadow | 必须的,表示水平阴影的位置,负值表示反方向的 |
v-shadow | 必须的,表示竖直阴影的位置,负值同样表示反方向 |
blur | 可选的,表示模糊程度,越大越模糊 |
spread | 可选,阴影的大小 |
color | 可选,颜色 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
背景知识点:
background-image:
div{
width: 200px;
height: 200px;
/*可以添加多个背景图*/
/*设置url*/
background-image:url(img1.png),url(img2.png);
/*设置位置*/
background-position: 100px 50px,left top;
/*是否重复*/
background-repeat: no-repeat,repeat;
}
还可以写一块
div{
background:url(img1.png) 10px 20px no-repeat,url(img2.png) left top repeat;
}
background-size:
用于定义背景图片的大小:
div{
background:url(logo.png);
/*这里还可以用百分比 100% 100%表示填充整个区域*/
background-size:80px 50px;
background-repeat:no-repeat;
}
background-origin:
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip:
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
文本效果:
text-shadow:
添加文字阴影,类似于box-shadow;
文本溢出处理:
white-space:nowrap;//强制不换行
text-overflow:ellipsis;//超出部分用…显示
text-overflow:clip;//超出剪切掉
word-wrap:break-word;//允许长文本换行
word-break:break-all;//允许拆分换行
word-break:keep-all;//不允许拆分换行
字体
@font-face{
/*testFont值的就是你自定义的字体的名称,最好是使用你下载的默认字体名称,它将被引用到你后面的font-family:testFont;*/
font-family:"testFont";
/*自定义字体文件得路径,可以是相对路径也可以是绝对路径*/
src:url("Pokemon Hollow.ttf");
/*是否加粗*/
font-weight: normal;
/*字体样式*/
font-style: normal;
}
p{font-family: testFont;}
2D转换
transform:translate(50px,100px):
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
transform:rotate(30deg);
表示以中心为原点顺时针旋转30个弧度,负数表示逆时针旋转;
transform:scale(2,3);
表示横向和纵向增大的倍数,上面就表示横向扩大2倍,竖向扩大3倍;
transform:skew(20deg,30deg);
表示绕x和y轴倾斜的度数;
这几个方法(不包含rotate())都可以单独设置在X或Y上的值;像这样translateX(20px);
3D转换
rotateX(30deg);rotateY(20deg);
表示绕X轴或者Y轴进行立体转换,
过渡
tansition
1.指定要添加效果的css属性,
2.指定效果的持续时间。
transition:width 2s,heigth 3s;
也可以分开定义;
div{
width:200px;
height: 200px;
background: yellow;
/*定义css属性*/
transition-property: width;
/*定义持续时间*/
transition-duration: 1s;
/*定义时间曲线,默认是ease*/
transition-timing-function: linear;
/*定义延迟时间*/
transition-delay: 2s;
}
动画
@keyframes 规则:
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
css3动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
div{
width:300px;
height: 300px;
/*定义动画名称*/
animation-name: myfirst;
/*运行时间*/
animation-duration: 5s;
/*运行的时间曲线 默认是ease*/
animation-timing-function: linear;
/*延迟时间*/
animation-delay: 2s;
/*运行的次数 默认是1*/
animation-iteration-count: infinite;
/*是否在下一周逆向播放*/
animation-direction: alternate;
/*是否正在运行或暂停*/
animation-play-state: running;
}
div
{
animation: myfirst 5s linear 2s infinite alternate;
}