在介绍css3新增的属性样式（新特性）前，我们要先知道什么是css3。

 

　　CSS是层叠样式表(CascadingStyleSheets)的简称。

 

　　CSS是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。

 

　　CSS是用来表现HTML或XML的标记语言。

 

　　CSS是由W3C的CSS工作组发布推荐和维护的.

 

　　CSS是编程入门人员的必修课，运用CSS样式可以让页面变得美观。

 

　　CSS语法由三部分构成：选择器、属性和值，例：selector{property:value}。

 

　　而CSS3就是最新的CSS标准，比之新增加了一些属性样式，既新特性。下面我们来介绍css3中几种常用的新特性（属性样式）：

 

　　一、边框

 

　　border-image属性：是一个简写属性，用于设置所有border-image-*属性的简写属性。

 

　　border-radius属性：是一个简写属性，用于设置四个border-*-radius属性。

 

　　border-top-left-radius设置左上角

 

　　border-top-right-radius设置右上角

 

　　border-bottom-right-radius设置左下角

 

　　border-bottom-right-radius设置右下角

 

　　border-top-left-radius：xy;x代表左上角x轴偏移量，y代表y轴偏移量，可以设置百分比以及像素。

 

　　border-radius:;

 

　　一个值表示左上右上左下右下都是

 

　　两个值表示第一个值左上右下第二个值右上左下

 

　　三个值表示第一个左上第二个值右上左下第三值右下

 

　　四个之分别左上右上右下左下

 

　　border-radius0000/0000；

 

　　前四个是四个x方向的x轴偏移后四个是y轴方向的偏移

 

　　box-shadow属性：向方框添加一个或多个阴影。

 

　　语法：box-shadow：值

 

　　值说明：

 

　　（1）第一个值：Npx阴影向水平方向偏移N个像素正数往右负数往左

 

　　（2）第二个值：Npx阴影向垂直方向偏移N个像素正数往下负数往上

 

　　（3）第三个值：羽化大小（模糊的大小）

 

　　（4）第四个值：阴影尺寸

 

　　（5）第五个值：颜色默认值是黑色

 

　　（6）第六个参数：内外阴影默认是外阴影内阴影是inset

 

　　（7）阴影可以写多个，中间用逗号隔开

 

　　（8）阴影可以简写，但是需要注意有一些值需要补0

 

　　综合例子：

 

　　p{

 

　　border:2pxsolidred;

 

　　border-radius:25px;/*创建圆角，100%为圆形*/

 

　　box-shadow:10px10px5px#888888；

 

　　}

 

　　二、背景

 

　　background-size属性：规定背景图片的尺寸。（重要属性）

 

　　语法：background-size：值

 

　　值说明：

 

　　（1）当只有一个值的情况下，宽度实现拉伸，并且高度会保持等比例，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽高

 

　　（2）当有两个值的情况下，宽度和高度会分别拉伸到对应的值，可能会变形，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽高

 

　　（3）contain当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化，（宽度或高度满足一个即可）

 

　　（4）在contain的基础上保证不留白，这就是cover的效果（宽度和高度都需要满足）

 

　　background-origin属性：规定背景图片的定位区域。

 

　　语法：background-origin：值

 

　　值说明：

 

　　（1）border-box：忽略边框直接从边框的起始0，0点平铺

 

　　（2）padding-box：默认值，忽略padding直接从padding的起始0，0点平铺

 

　　（3）content-box：从内容部分开始平铺跟padding有关系

 

　　background-image属性：设置元素的背景图像。

 

　　background-repeat属性：设置是否及如何重复背景图像。

 

　　三、文本效果

 

　　text-align-last属性：设置如何对齐最后一行或紧挨着强制换行符之前的行。

 

　　text-emphasis属性：向元素的文本应用重点标记以及重点标记的前景色。

 

　　text-justify属性：规定当text-align，设置为“justify”时所使用的对齐方法。

 

　　text-outline属性：规定文本的轮廓。

 

　　text-overflow属性：规定当文本溢出包含元素时发生的事情。

 

　　text-shadow属性：向文本添加阴影。

 

　　text-wrap属性：规定文本的换行规则。

 

　　word-wrap属性：允许对长的不可分割的单词进行分割并换行到下一行。

 

　　四、颜色与透明度

 

　　rgba（）

 

　　R:Red、G:Green、B:Blue、A:Alpha，R、G、B取值范围0~255，A的取值范围是0-1。

 

　　RGBA可以用于所有使用颜色的地方

 

　　rgb三个值越小，颜色越黑

 

　　如果是纯色的背景，可以是使用rgba

 

　　如果是图片，可以脱离父子关系，让后用定位的方式来做。

 

　　hsla（）

 

　　H色调取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色

 

　　S饱和度取值范围0%~100%

 

　　L亮度取值范围0%~100%

 

　　A透明度取值范围0~1

 

　　例：

 

　　background-color:hsla(120,100%,50%,1);

 

　　总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。





本文转载自中文网