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]-->

Css新增内容

原文地址：https://www.cnblogs.com/HQY110/p/10453601.html