10个常用的CSS3知识分享

2024-01-17 14:40 小编

1、文本效果

阴影：text-shadow:X偏移Y偏移模糊程度阴影颜色；text-shadow:5px5px5px#FF0000;文本溢出：text-overflow:ellipsis;overflow:hidden;white-space:nowrap;

2、字体

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

调用：font-family:字体名称;

3、3D变形

位移：translate3d(x,y,z)、translateZ(z)缩放：scale3d(x,y,z)、scaleZ(z)旋转：rotate3d(x,y,z,angle)、rotateZ(angle)

4、多列布局

多列布局columns：(column-width)||(column-count);column-width:auto|(length);column-count：auto|(integer);列间距column-gap:normal||(length)列表边框column-rule:(column-rule-width)|(column-rule-style)|(column-rule-color)跨列设置column-span:none|all

5、盒子模型

box-sizing:content-box|border-box|inherit

6、自由缩放属性

resize：none|both|horizontal|vertical|inherit

7、前缀

-webkit-（chrome和Safari）、-moz-（firefox）、-ms-（IE）、-o-（opera）

8、边框

圆角：border-radius:5px4px3px2px;/*顺时针*/

阴影：box-shadow:X轴偏移量Y轴偏移量

[阴影模糊半径][阴影扩展半径][阴影颜色][投影方式];

/*默认外阴影*/外阴影：box-shadow:4px2px6px#333333;

内阴影：box-shadow:4px2px6px#333333inset;

多阴影：box-shadow:4px2px6px#f00,-4px-2px6px#000,0px0px12px5px#33CC00inset;

边界图片：border-image:图片路径像素顺时针延伸方式（repeat重复

round平铺stretch拉伸）border-image:url(border.png)3030round;-webkit-border-image:url(border.png)3030round;/*Safari5andolder*/-o-border-image:url(border.png)3030round;/*Opera*/

9、背景background

[background-position][/background-size]|[background-repeat]|

[background-attachment]|[background-clip]|[background-origin],...

【例】background:url(logoindex.png)no-repeatlefttop/75%50%,url(logoindex.png)no-repeatrightbottom/50%45%;

10、渐变

线性渐变：//默认从上到下、可以改变方向和角度

background:-webkit-linear-gradient(red,blue);/*Safari5.1-6.0*/background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/background:-moz-linear-gradient(red,blue);/*Firefox3.6-15*/background:linear-gradient(red,blue);/*标准的语法*/

径向渐变：background:-webkit-radial-gradient(red,green,blue);/*Safari5.1-6.0*/background:-o-radial-gradient(red,green,blue);/*Opera11.6-12.0*/background:-moz-radial-gradient(red,green,blue);/*Firefox3.6-15*/background:radial-gradient(red,green,blue);/*标准的语法*/

Tag：分享

返回首页上一篇：前端开发中经常遇到的一些css问题下一篇：探讨浏览器的兼容性问题，谈谈常见的css bug有哪些