电话
13363039260
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-size:auto|<长度值>|<百分比>|cover|contain原点：background-origin：border-box|padding-box|content-box;
裁剪：background-clip：border-box|padding-box|content-box|no-clip多重背景：background：[background-color]|[background-image]|
[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);/*标准的语法*/
猜你喜欢
联络方式：
13363039260
微信二维码 