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
    5
    h1{text-shadow:0 0 3px #f00;}/*文字描边效果*/
    h1{
    color:white;
    text-shadow:2px 2px 4px #000;
    }/*浮雕效果*/
  • word-wrap属性,允许长单词,URL强制进行换行
    1
    2
    word-wrap: break-word;
    word-wrap: normal;
  • @font-face规则
    页面上需要用到的特殊字体放在服务器端fonts文件夹里。不同浏览器适用的字体格式不一样,我们可以利用该网站来转换字体格式。
    https://www.fontsquirrel.com/tools/webfont-generator
    1
    2
    3
    4
    5
    6
    7
    @font-face{
    font-family: kastlerFont;/*定义字体名称*/
    src:url("fonts/kastler.ttf");/*定义字体来源*/
    }
    p{
    font-family: kastlerFont;/*引用字体*/
    }

    2D变换

    对元素进行旋转、缩放、移动、拉伸。
  • transform属性
    1
    2
    transform:rotate(30deg);/*旋转,正值顺时针旋转,负值逆时针旋转*/
    transform:scale(x,y);/*缩放,0~1缩小,大于1放大*/

    过渡和动画

  • transition属性,显示过渡效果
    1
    2
    3
    4
    transition: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
    3
    transform:rotateX(30deg);/*沿X轴旋转*/
    transform:rotateY(30deg);/*沿Y轴旋转*/
    transform:rotateZ(30deg);/*沿Z轴旋转*/
  • perspectiv属性,设置透视关系
    1
    perspective:100px;/*眼睛到舞台距离*/