CSS3新特性-新增的标签属性

边框

圆角边框       

border-radius：xxpx；

边框阴影       

box-shadow：X轴偏移量  Y轴偏移量  【阴影模糊半径】   【阴影扩展半径】 阴影颜色  投影方式

    X轴偏移量和Y轴偏移量可负值，【阴影模糊半径】即模糊距离，其值越大阴影边缘越模糊，【阴影扩展半径】即阴影尺寸，正值越大阴影延展越大，负值则缩小，阴影颜色默认黑，投影方式中内部阴影，inset，外部阴影，省略，但是投影方式只能放第1个或最后1个。

边框图片       

border-image：url（border.png） 10 10 10 10  repeat

   10 10 10 10为切割图片的宽度，单位为像素，顺时针设置，也可简写1个10，最后一个可以有值round  平铺、repeat  重复、stretch  拉伸。

颜色

RGBA       

color：rgba（R,G,B,A）

RGB范围0-255或0-100%，a就是Alpha透明度范围0-1。

渐变颜色

径向渐变  radial-gradient

线性渐变  linear-gradient（to bottom, #000, #999）

起始点颜色和结束点颜色可多个值，渐变方向有：

渐变方向

渐变方向	说明
to top	从下向上
to right	从左到右
to bottom	从下向上
to left	从右向左
to top left	右下角到左上角
to top right	左下角到右上角

文本

文本溢出     

text-overflow：clip | ellipsis

文本溢出用何种方式显示：剪切  clip、省略号  ellipsis。

文本行为     

text-wrap：normal  |  break-word

normal  浏览器默认值，表示控制连续文本换行

break-word 表示内容将在边界内换行，设置长单词或URL地址内部进行换行，此属性不常用。

嵌入字体  

可加载服务器的字体文件，即便电脑中没有，

@font-face{
    font-family:字体名称;
    src:字体文件在服务器上的相对路径/绝对路径;
}

文本阴影  

text-shadow：X-Offset  Y-Offset  blur  color；

X-Offset：阴影水平偏移距离（右正左负），Y-Offset：  阴影垂直偏移距离（下正上负），blur：阴影模糊程度 ，最小值0，为最清晰，值越大越模糊。

图片

背景图片的原始起始位置  

background-origin：border-box | padding-box(默认) | content-box

背景图片剪裁  

background-clip：border-box | padding-box | content-box | no-clip(不剪裁)

背景图片大小

background-size：auto（默认不改变） | <长度值> | <百分比> | cover   | contain

<长度值> | <百分比>为宽高设置，任选一个，若只出现一个值即为宽；cover  覆盖，图片等比缩放填充整个容器；contain  容纳，图片缩放至某一边紧贴容器边缘为止

多重图片背景  

multiple background，多个图片属性设置，之间用逗号间隔。属性之间不加逗号，若size值跟在position后则要用“/”，而且background-repeat，background-color只能设置一次。

 

 

关注我吧

关注「前端一起学」公众号 ，看着项目进阶学习，让我们一起学前端，一起进步。