CSS3 新增属性
边框属性背景属性文字属性颜色属性1. 边框属性
（1）border-radius
border-radius 用来设计边框圆角的属性。
语法：
border-radius:none|<length>{1,4}[/<length>{1,4}]?
none：是默认值，表示没有圆角<length>：为长度值，不能为负值,分为两组，每组可以有1到4个值，第一组为水平半径，第二组为垂直半径
例：
div{border-radius:20px;border-radius:20px 40px;}
（2）box-shadow
box-shadow 用于向方框添加阴影
语法：
box-shadow: h-shadow|v-shadow|blur|spread|color|inset;
h-shadow：（必需）水平阴影的位置。允许负值v-shadow：（必需）垂直阴影的位置。允许负值blur：模糊距离spread：阴影的大小color：阴影的颜色。在CSS颜色值寻找颜色值的完整列表inset：从外层的阴影（开始时）改变阴影内侧阴影
例：
div{box-shadow:10px 10px 5px #888888;}
（3）border-image
border-image 属性，专门用于图像边框的处理，可用灵活地分割图像，并应用于边框。
语法：
border-image:none|<image>[<number>|<percentage>{1,4}[/<border-width>{1,4}]?[stretch|repeat|round]{0,2}
none：默认值，表示边框没有背景图<image>：使用绝对或相对的url地址指定图像源<number>：裁切边框图像大小，没有单位，默认以像素为单位<percentage>：裁切边框图像大小，使用百分比表示<border-width>：用于设定边框宽度，不能为负值stretch、repeat、round：分别表示拉伸、重复、平铺，默认值为stretch
例：
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */-o-border-image:url(border.png) 30 30 round; /* Opera */border-image:url(border.png) 30 30 round;
（4）border-color
border-color 属性用于设置边框的颜色。
语法：
border-color:[<color>|transparent]{1,4}
<color>：是一个颜色值，可以是半透明颜色transparent：是透明值，不设颜色时使用，为默认值
例：
border-style:solid;border-color:#ff0000 #0000ff;
2. 背景属性
CSS3增强了原有背景属性的功能，并增添了一些新的背景属性。
（1）background-clip
background-clip 用来指定背景的显示区域。
语法：
background-clip:border-box|padding-box|content-box;
border-box：表示背景从边框开始显示padding-box：表示背景从内边距开始显示content-box：表示背景仅在内容区域显示
例：
-webkit-background-clip:border-box;-moz-background-clip:border-box;background-clip:border-box;
（2）background-origin
background-origin 用来指定背景图像的原点位置，默认情况下总是以元素边框以内的左上角为坐标原点进行背景图像定位。
语法：
background-origin:border-box|padding-box|content-box;
border-box：表示原点位置为边框区域的开始位置padding-box：表示原点位置为内边框区域的开始位置content-box：表示原点位置为内容区域的开始位置
例：
-webkit-background-origin:border-box;-moz-background-origin:border-box;background-origin:border-box;
（3）background-size
background-size 用来指定背景图像的大小。
语法：
background-size:[<length>|<percentage>|auto]{1,2}|cover|contai;
<length>：设置背景图像的宽度<percentage>：设置背景图像的高度
(宽度与高度如果只给出一个值，第二个值设置为auto)cover：表示保持背景图像本身的宽高比例将图像缩放到正好完全覆盖所定义的背景区域，可能会裁剪掉部分图像contai：表示保持背景图像本身的宽高比例，将图像缩放到正好适应所定义的背景区域，但可能不会完全覆盖背景区域
例：
background-size:30% 30%,60% 60%, 100% 100%;
3. 文字属性
（1）text-shadow
text-shadow 可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
语法：
text-shadow:length|length|opacity|color；
length：表示阴影在水平和垂直方向相对于文字本身的偏移距离（可以为负值）opacity：表示阴影效果模糊的距离（不能为负，0表示没有模糊）color：表示阴影的颜色值
例：
text-shadow:5px 5px 3px #333;
（2）text-overflow
text-overflow 溢出文本处理属性
语法：
text-overflow:clip|ellipsis|ellipsis-word；
clip：表示直接裁切溢出的文本ellipsis：表示文本溢出时显示省略标记，代替最后一个字符ellipsis-word：也表示文本溢出时显示省略标记，代替的是最后一个词
例：
overflow:hidden; /*溢出内容设为隐藏*/white-space:nowrap; /*强制文本单行显示*/text-overflow:ellipsis; /*设置溢出文本显示为省略标记*/
（3）word-wrap
语法：
word-wrap: normal|break-word|；
normal：表示为默认的连续文本换行，允许内容超出边界break-word：允许在单词内换行
例：
p.test {word-wrap:break-word;}
（4）@font-face规则
CSS3 新增了字体自定义功能，通过 @font-face 规则来引用互联网上任一服务器中存在的字体。
语法：
@font-face:{属性:值;}
属性和值为：
font-family：设置文本的字体名称，该名称可被当作字体引用font-style：设置文本样式font-variant：设置文本是否为小型大写字母大小写font-weight：设置文本的粗细font-stretch：设置文本是否横向的拉伸变形font-size：设置文本字号大小src：设置自定义字体的相对路径或者绝对路径，可包含 format 信息
例：指定名为 “myFirstFont” 的字体，并指定在哪里可以找到它的 url：
@font-face {font-family: myFirstFont;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */}
4. 颜色属性
（1）HSL 模式
取值：
H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S： Saturation(饱和度)。取值为：0.0% - 100.0%L： Lightness(亮度)。取值为：0.0% - 100.0%
例：hsl(360,50%,50%) 红色
<style type="text/css">body{background:rgba(0,0,255,0.5);}div{width:300px;height:300px;background:hsl(140,50%,50%);position:absolute;top:0;left:0;}</style><body><div></div></body>
（2）HSLA 模式
取值：
H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S： Saturation(饱和度)。取值为：0.0% - 100.0%L： Lightness(亮度)。取值为：0.0% - 100.0%A： Alpha透明度。取值0~1之间。
例：hsl(360,50%,50%,0.5) 红色
<style>body{background:HSL(0,100%,50%)}div{width:300px;height:300px;background:HSLA(230,100%,50%,0);position:absolute;top:0;left:0;}</style></head><body>好好学习，天天向上<div></div></body>
（3）RGBA 模式
取值：
R： 红色值。正整数 | 百分数G： 绿色值。正整数 | 百分数B： 蓝色值。正整数 | 百分数A： Alpha透明度。取值0~1之间。
例：rgba(255,0,0,0.5) 半透明红色
<style type="text/css">body{background:rgba(255,0,0,1)}div{width:300px;height:300px;background:rgba(0,0,255,0.4);position:absolute;top:0;left:0;}</style><body>好好学习，天天向上<div></div></body>
最后
水平垂直居中的方法三列布局（中间固定两边自适应宽度）清除浮动元素的方法和各自的优缺点css 实现自适应正方形CSS3 新增伪类有那些CSS3 有哪些新特性请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景rgba() 和 opacity 的透明效果有什么不同…CSS3 相关面试题
前端学习笔记、大厂面试题等PDF均可分享，点这里进入免费领取!
