css3新增属性

css新增的属性

 一、颜色的表示方法：
          1、十六进制 000 fff ff0000 00ff00 0000ff
          2、英文单词
          3、rgba(red(0-255),green(0-255),blue(0-255),alpha(0-1)
               颜色的值越大，则越亮，透明的值越大，越不透明
          4、hsla(色调（0-360）, 饱和度（0%-100%）, 亮度（0%-100%）, 透明度（0-1）)
     background: rgba(255, 0, 0, 0.4); 
     background: hsla(200, 0%, 50%, 0);
     opacity: 0; 
  二、transparent   控制透明度（这个可以实现三角形）
   rgba() 来控制透明度
   transparent 不可调节透明度，始终完全透明
   opacity：数字 背景跟字体都会生效
    div {
            width: 0;
            /* border-top: red solid 5px;
            border-left: transparent solid 5px;
            border-bottom: transparent solid 5px;
            border-right: transparent solid 5px; */
            border: 16px solid red;
            border-color: transparent red transparent transparent;
        }
   三、盒子模型
       box-sizing  表示你设置的宽高从什么位置去设置
       1、border-box：对象的实际宽度就等于设置的width值，即使定义有border和padding
       2、content-border：对象的实际宽度等于设置的width值和border、padding之和
   四、边框的属性
   <1>边框圆角
          border-radius:左上角 右上角 右下角 左下角  
          border-radius:属性值1（左上角，右下角） 属性值2（右上角 左下角）；
          border-radius:属性值1（左上角） 属性值2（右上角，左下角） 属性3（右下角）
              /* border-radius: 10px 20px 30px 40px/40px 30px 20px 10px; */
            /* border-radius：属性值1/属性值2  属性值1代表上下，属性值2代表左右*/
            border-radius: 100px/80px;
 半圆
           div {
            width: 300px;
            height: 150px;
            background: red;
            border-radius: 150px 150px 0 0;
  <2>边框阴影
            box-shadow: 水平距离 垂直距离 模糊距离 阴影尺寸 颜色 inset（内阴影）;
            box-shadow: -5px -5px 10px 3px #ccc, 5px 5px 10px 3px #ccc inset;
   <3>边框图片
            div {
            width: 200px;
            height: 200px;
            border: 20px solid;（可加可不加颜色）
            border-image-source: url(../images/border.png);（边框图片路径）
            /* border-image-slice: value; 没有单位的数值*/（图片边框向内偏移）
            border-image-slice: 27;
            /* border-image-repeat 是否平铺
                取值：repeat 平铺不拉伸
                round 平铺又拉伸
                stretched 拉伸不平铺
             */
            border-image-repeat: round;
        } 
 五、文本属性
 1）文本阴影text-shadow ： 2px（水平，可为负数） 3px（垂直，可为负数）  2px（模糊距离，不能为负数）  red；
 2）文本描边 -webkit-text-stroke：宽度 颜色；一定要加上-webkit-前缀
 3）溢出省略  text-overflow：ellipse（省略号）；要和overflow：hidden；white-space：nowrap使用。
 4）文本排版  dirction
 ltr(left to right 从左到右)
 rtl（right  to left 从右到左），一定要配合 unicode-bidi: bidi-override; */
            direction: rtl;
            unicode-bidi: bidi-override;
 六、背景属性(默认情况下，背景颜色是从padding开始排放)
1）background-origin:属性规定background-position属性相对于什么位置来定定位。（对背景图才有用） background-origin：content-box（从内容开始）/padding-box（从padding开始）/border-box（从边框开始）；
2）background-size：改变背景图片的大小
属性值有：auto（图片原来的值，默认值）/number（200px）可能让图片变形/percentage：value% value%（根据盒子的宽高来定）/cover（图片没有盒子大时，设置cover可使图片完全覆盖盒子，但是图片不能完全显示.一般配合background-position：center；去使用）/contain(包含，可能会出现空白区域)
3）backgroun-clip设置背景显示在哪些区域
取值：border-box：显示content，padding、border区域。
          padding-box：显示在padding、content区域
          content-box：显示在content区域
七、css3渐变（了解）
1）线性渐变（默认方向从上往下）
background：linear-gradient（direction，color1，color2，...）
direction取值:to left(从右往左)  to right（从左到右） to top （从下往上）to bottom（从上往下，默认值） to left bottom （左下角）to left top（左上角） to right top（右上角） to right bottom（右下角）
角度：单位为deg
当为0deg，得到一个从下往上。
90deg，得到一个从左往右
180deg，得到一个从上往下的渐变
-90deg，得到一个从右往左
2）径向渐变（一点向四周渐变）
background：-webkit-radial-gradient（center，shape，size，startcolor，...lastcolor）
center 渐变起点的位置，可以是百分比（注意要设两个值）
shape 渐变形状 ellipse表示椭圆（默认），circle表示圆形
size 渐变的大小，即到哪里为止。closest-side 最近边
farthest-side 最远边  closest-corner  最近角  farthest-corner最远角
3）重复渐变
background：repeating-linear-gradient（red，blue 20%，green 40%）
background：repeating-radial-gradient（red，blue 20%，green 40%）
八、自定义字体
引用
@font-face｛
font-family:"叶根"；
src:url(字体的路径)；
｝
相应的元素
div{
font-family:"叶根"；
｝
九、字体图标
引用
十、css过渡（重要）
transition:
取值：transition-property：all ，height ，width（检索或设置对象中参与过渡）
         transition-duration：3s；快慢
         transition-delay：1s；
transition-timing-function：
 取值：ease；开始快，后面越来越慢。
         ease-in；开始慢，后面越来越快
         ease-out；减速运动
         ease-in-out；先加速后减速
总写：transition: property duration delay timing-function;
transition: all 3s linear;