css3笔记

CSS3

边框

• 边框属性
  
  • border-radius
  • box-shadow
  • border-image

背景

• 背景属性
  
  • backgoroud-clip ：content-box/padding-box/border-box 指定盒子的显示区域
  • background-origin ：content-box/padding-box/border-box 指定背景定位的区域
  • background-size 规定背景图片的尺寸可以拉升收缩
  • background-image:url(bg_flower.gif),url(bg_flower_2.gif); //可以设置多幅背景图片了

文本效果

• 文字属性
  
  • text-shaow ：水平阴影 垂直阴影 模糊距离阴影颜色；
  • word-warp: break-word 强制对不可分割的单词打断换行
• 定义字体
  
  • @font-face
    {
    font-family: myFirstFont;
    src: url(‘Sansation_Bold.ttf’),
    url(‘Sansation_Bold.eot’); /* IE9+ */
    font-weight:bold;
    }

2D转换

• transform属性的方法
  
  • translate（left,top） 将当前元素从当前位置移动
  • rotate(30deg) 怨怒是顺时针旋转指定角度
  • scale（2//宽度倍数, 4//高度倍数）；将元素的大小倍数改变
  • skew（30deg//x轴旋转角度 ,60deg//y轴旋转角度);
  • matrix(n,n,n,n,n,n); 将所有变换连写

3D转换

• transform属性的方法
  
  • rotateX（）; 绕x轴旋转的角度
  • rotateY（）;绕y轴旋转的角度
  • rotateZ（）;绕z轴旋转的角度
• transform-style 的值
  
  • flat 子元素在2D中显示
  • preserve-3d 子元素3D中显示
• transform-origin：10% 10%; 确定旋转的基点
• perspective：500； 设定观察的位置

过渡属性

• transition-property ： width; 规定过渡属性的名称
• transition-duation： 1s; 过渡属性所需要花费的时间
• transition-timing-function： linear//线性|ease//慢-快-慢（默认）|ease-in//慢-快|ease-out//快-慢|ease-in-out //慢快慢};
• transition-delay: 0s; 过渡效果从什么时候开始

CSS3动画

• @keyframes规则 定义样式的变化
  
  • @keyframes myfirst
    {
    from {background: red;}
    to {background: yellow;}
    }
• 捆绑到元素上
  
  • div
    {
    animation: myfirst 5s;
    -moz-animation: myfirst 5s; /* Firefox */
    -webkit-animation: myfirst 5s; /* Safari 和 Chrome */
    -o-animation: myfirst 5s; /* Opera */
    }
• 根据动画进程变化效果
  
  • @keyframes myfirst
    {
    0% {background: red;}
    25% {background: yellow;}
    50% {background: blue;}
    100% {background: green;}
    }
• 设置动画属性
  
  • div
    {
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;

多列

• 多列属性
  
  • colum-count : 3; 将元素中的文本分成三列
  • column-gap ： 40px; 规定列之间的间隔
  • column-rule: 3px outset #ff0000 设置列之间的宽度样式和颜色

用户界面

• 用户可调整宽高
  
  • div
    {
    resize:both;
    overflow:auto;
    }
• 设置盒子大小的计算模式
  
  • box-sizing : border-box; width = padding + border + content
  • box-sizing: content-box; width = content
• 设置元素的外边框
  
  • div
    {
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
    }