css3新增属性

可节省设计时间的属性

border-color:控制边框的颜色,并且有更大的灵活性,可以产生渐变效果
border-image:控制边框图像
border-radius:能产生类似圆角矩形的效果
text-shadow:文字投影
box-shadow:元素盒子投影
multiple backgrounds:多重背景图像,可以让一个元素有多个背景图像

例:

定义了三个背景图,下面分别对应背景图的位置
  background-image:url(0.1png),url(0.2png),url(0.3png);
  background-position:left top;-400px bottom;-800px top;
  border-radius:20px;/*css3中的圆角矩形*/
 -moz-border-radius:20px;/*Mozilla中的圆角矩形*/
 -webkit-border-radius:20px;/*Safari中的圆角矩形*/
 -webkit-box-shadow:3px 5px 10px #333;/*Safari中的盒子阴影*/

新增属性

一、颜色的表示方法:

 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:ellipsis(省略号);
 overflow:hidden;
 white-space:nowrap;/*单行文本超出*/

 text-overflow:ellipsis; 
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;/*超出3行*/
 overflow: hidden;/*多行文本超出*/

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;

1.text-shadow 文本阴影

text-shadow: 10px -10px 0px rgba(255,0,0,0.6);
             第一个参数是水平偏移量,正值就往右,负值就往左 
             第二个参数是垂直偏移量,正值就往下,负值往上 
             第三个参数模糊程度,值越大,字越模糊,值为0 就是清晰  
             第四个参数,阴影颜色

2.text-overflow 超出文本显示省略号

  /*单行文本溢出,用省略号显示的语法*/
    p{
        overflow: hidden;/* 让超出边框的文本隐藏起来*/
        text-overflow: ellipsis;/* 让超出边框边缘的的文本显示成...*/
        white-space:nowrap;/*让多出边框的文本不换行,在同一行显示*/
     }

3.颜色 rgba

用rgba的好处是当父元素设置透明的时候,子元素不会跟着一块变透明

   div{
        background: #f00;
        opacity: 0.6;/* 如果这样设置透明度的话,div里面的子元素文字也会跟着透明*/
        filter: alpha(opacity = 60);
     }

如果用rgba设置透明度的话,子元素就不会跟着透明了

  div{
         background: rgba(255,0,0,0.6);
     }

4.圆角效果

  border-radius: 5px; border-radius: 50%; 就变成圆了

5.box-shadow 边框阴影,和文本阴影类似

  box-shadow:3px 5px 10px #333;
      第一个参数是水平偏移量,正值就往右,负值就往左 
      第二个参数是垂直偏移量,正值就往下,负值往上 
      第三个参数模糊程度,值越大,字越模糊,值为0 就是清晰 
      第四个参数 外延值,值越大,就越往外延伸 
      第五个参数,阴影颜色

6.background-origin背景原点

属性值有

  border-box 
  padding-box 
  content-box 
 表示背景是从border、padding、content处开始的

7.background-size背景大小

默认俩参数,可以设置宽和高 
属性值为cover的话呢,就是背景扩大到覆盖整个元素为止,可能会超出范围 
属性值为contain的话呢,就是扩大到有一边挨着元素了为止,可能会有一块没覆盖上

8.background-clip背景裁切

属性值为border -box表示从border处裁切,保留border以内的 
属性值为content-box 表示从content处裁切,保留content以内的

css浏览器的兼容问题

解决兼容的原则

 1.尽量使用兼容的属性
 2.使用CSS hack技术

使用CSS hack技术解决兼容问题:

 1.!important关键字
 在同一个选择器中,定义了两条相冲突的规则,IE6不认!important,而Firefox/IE7+定义了以important的为准

 2.在属性前添加“+”“——”号兼容不同浏览器  
在属性前添加“+”(加号)可区别ie与其它浏览器,添加“——”(下划线)可区别IE6和IE7,IE7不支持“——”

 3.使用子选择器和属性选择器等IE6不支持的选择器
 html body{background-image:(bg.gif)}/*IE6有效*/
 html>body{background-image:(bg.png)}/*Firefox/IE7有效*/
 4.使用IE条件注释
 条件注释是IE特有的功能,能够使用IE浏览器对XHTML代码进行单独处理
   4-1.<!--[if IE]>
         此内容只有IE可见,其他浏览器会忽视掉
       <![endif]-->
   4-2.<!--[if IE6.0]>
          此内容只有IE6可见
       <![endif]-->
   4-3.<!--[if !IE6.0]>
          除了IE6.0之外的都可见
       <![endif]-->
   4-4.<!--[if lte/lt IE6]>
          此内容IE6及其以下版本可见/IE6以下版本可见
       <![endif]-->
   4-5.<!--[if gte/gt IE7]>
          此内容IE7及其以上版本可见/IE7以上版本可见
       <![endif]-->