13518219792
小编给大家分享一下css3中新增了的属性样式是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、做网站、外贸营销网站建设、罗甸网络推广、重庆小程序开发、罗甸网络营销、罗甸企业策划、罗甸品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供罗甸建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
在介绍css3新增的属性样式（新特性）前，我们要先知道什么是css3。
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
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 ： x y ; x代表左上角x轴偏移量 ，y代表y轴偏移量，可以设置百分比以及像素。
border-radius:;
一个值表示 左上 右上 左下 右下 都是
两个值表示 第一个值左上右下 第二个值 右上左下
三个值表示 第一个 左上 第二个值右上左下 第三值 右下
四个之 分别 左上 右上 右下 左下
border-radius 0 0 0 0/ 0 0 0 0；
前四个是四个x方向的x轴偏移 后四个是y轴方向的偏移
box-shadow属性：向方框添加一个或多个阴影。
语法：box-shadow：值
值说明：
（1）第一个值 ：Npx 阴影向水平方向偏移N个像素 正数往右 负数往左
（2）第二个值 ：Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上
（3）第三个值 ：羽化大小 （模糊的大小）
（4）第四个值 ：阴影尺寸
（5）第五个值 ：颜色 默认值是黑色
（6）第六个参数： 内外阴影 默认是外阴影 内阴影是inset
（7）阴影可以写多个，中间用逗号隔开
（8）阴影可以简写，但是需要注意有一些值需要补0
综合例子：
p{
border: 2px solid red;
border-radius:25px; /* 创建圆角，100%为圆形 */
box-shadow: 10px 10px 5px #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);
以上是“css3中新增了的属性样式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
