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只能设置一次。

 

 

关注我吧

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值