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

论坛 期权论坛 脚本     
匿名网站用户   2020-12-20 13:33   11   0

边框

圆角边框

border-radius:xxpx;

边框阴影

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

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

边框图片

border-image:url(border.png)10 10 10 10repeat

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

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:1136255
帖子:227251
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP