Web前端开发学习日记4
学完了CSS的基础知识,我们来学习一下最新版本CSS3的一些特性,根据浏览器的不同,有些属性我们需要加上浏览器前缀。
safari,Chrome=====-webkit-
Firefox====-moz-
Opera====-o-
IE====-ms-
圆角边框
通过border-radius属性来添加圆角边框:
1、border-top-left-radius:左上角水平值,垂直值 ;
2、border-top-right-radius:右上角水平值,垂直值 ;
3、border-bottom-left-radius:左下角水平值,垂直值 ;
4、border-bottom-right-radius:右下角水平值,垂直值 ;
阴影
通过box-shadow属性来设置盒子阴影效果:
1、box-shadow:inset 水平偏移 垂直偏移 模糊距离 颜色;(内部阴影效果)
2、box-shadow:outset 水平偏移 垂直偏移 模糊距离 颜色;(默认值,外部阴影效果)
文字和文本
- text-shadow属性设置文本阴影
text-shadow:水平偏移 垂直偏移 阴影大小 颜色;1
2
3
4
5h1{text-shadow:0 0 3px #f00;}/*文字描边效果*/
h1{
color:white;
text-shadow:2px 2px 4px #000;
}/*浮雕效果*/ - word-wrap属性,允许长单词,URL强制进行换行
1
2word-wrap: break-word;
word-wrap: normal; - @font-face规则
页面上需要用到的特殊字体放在服务器端fonts文件夹里。不同浏览器适用的字体格式不一样,我们可以利用该网站来转换字体格式。
https://www.fontsquirrel.com/tools/webfont-generator1
2
3
4
5
6
7@font-face{
font-family: kastlerFont;/*定义字体名称*/
src:url("fonts/kastler.ttf");/*定义字体来源*/
}
p{
font-family: kastlerFont;/*引用字体*/
}2D变换
对元素进行旋转、缩放、移动、拉伸。 - transform属性
1
2transform:rotate(30deg);/*旋转,正值顺时针旋转,负值逆时针旋转*/
transform:scale(x,y);/*缩放,0~1缩小,大于1放大*/过渡和动画
- transition属性,显示过渡效果
1
2
3
4transition:all 1s linear;/*属性名,持续时间,过度方法*/
transition-property:all;/*属性名*/
transition-duration:1s;/*持续时间*/
transition-timing-function:linear;/*过渡方法,linear匀速,ease慢快慢,ease-in慢快,ease-out快慢,easr-in-out慢快慢*/ - animation属性,显示动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14@keyframes mycolor{
0%{background-color: red;}
30%{background-color: blue;}
60%{background-color: yellow;}
100%{background-color: green;}
}/*定义动画,关键帧*/
div:hover{
animation: mycolor 5s linear;/*动画名字,动画时长,动画方式*/
}
/*animation子属性*/
animation-name: mycolor;/*动画名字*/
animation-duration: 5s;/*动画时长*/
animation-function: linear;/*动画方式*/
animation-play-statea: running;/*动画播放状态,running正在播放,paused播放完成*/3D变换
- transform-style属性,设置3d变换
1
transform-style:preserve-3d;
- transform属性,可以设置沿X轴,y轴,z轴变换
1
2
3transform:rotateX(30deg);/*沿X轴旋转*/
transform:rotateY(30deg);/*沿Y轴旋转*/
transform:rotateZ(30deg);/*沿Z轴旋转*/ - perspectiv属性,设置透视关系
1
perspective:100px;/*眼睛到舞台距离*/