css3 知识点积累

-moz-    兼容火狐浏览器
-webkit-  兼容chrome 和safari

1.角度
  transform:rotate(30dge)  水平线与div 第四象限30度
  transform:rotate(-30dge)  水平线与div 第一象限30度

2.阴影
 box-shadow:5px 5px 5px #888888;
 
3.边框

  border-radius
  box-shadow:阴影
  border-image:图片边框


  border-radius:
    四个值：左上、右上、右下、左下
    三个值：左上、右上角和左下角、左下角
    两个值：左上角和右下角、右上角和左下角
    一个值：四个角相同


border-top-left-radius     定义了左上角的弧度
border-top-right-radius     定义了右上角的弧度
border-bottom-right-radius     定义了右下角的弧度
border-bottom-left-radius     定义了左下角的弧度

4.bottom 底部
 

单div,双图片背景设置
 #example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

5.background-origin:属性指定了背景图片的位置区域
    border-box 边框
    padding-box 内边距中
    content-box  内部区域


6.background-clip属性
 
 CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

7.渐变色
  线性渐变色： Liner Gradients  向下/左/右/上/对角
  径向渐变色:  Radial Gradients  由他们的中心定义
    通常使用background-img:
 
8.文字效果
  text-shadow:
  box-shadow:盒子阴影
  word-wrap:
  word-break:  break-word;//允许文本换行不拆分文字
 word-break:break-word;//单词拆分换行



9.2D转换

  transform:
案例：transform:rotate(30dge)   rotate是旋转角度  rotateX根据X轴旋转 rotateY根据Y轴旋转
      transform:translate(50px,100px) 向左平移50，向上100
  transform-orign:

10.3D动画设置
 
案例：    transition可以设置宽度高度变化时间，也可以添加边框旋转等设置变化时间

  div
{
    100px;
    height:100px;
    background:red;
    transition:width 2s,height 2s,transform 2s;
}

div:hover
{
    300px;
    height:400px;
        transform:rotate(30deg)
}

11.css3动画
 
  当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
  （1） 规定动画的名称
   （2） 规定动画的时长

  案例：(进行n百分比的时候，可以添加其他的属性边框、透明度、位置等)
   div
    {
    100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
      }

@-moz-keyframes myfirst /* Firefox */
    {
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
     }


12.多列属性   可以是的文本像报纸一样去排版
  column-count   ：3； //表示3列
  column-gap:10px; //定义列与列之间间隔是10像素
  column-rule-style:solid;//实线     dotted虚线间隔  outset  黑灰线
  column-width  :指定列的宽度
  column-count  :跨列数

 13.outline  外边框线
 15.轮廓修饰   ouline-offset:30px; //指轮廓加大30px,轮廓不占用空间，不一定是矩形
16.圆角图片可以通过 border-radius 修饰
 17.禁用按钮的样式设置
.disabled {
    opacity: 0.6;//透明度0.6
    cursor: not-allowed; //设置不可点击
}

18.width(宽) + padding(内边距) + border(边框) = 元素实际宽度
   height(高) + padding(内边距) + border(边框) = 元素实际高度