十个CSS3知识清单

2019-09-12 郑州网站建设  

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

2、字体

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

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

33D变形

位移: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-countauto | (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、自由缩放属性

resizenone | both | horizontal | vertical | inherit

7、前缀

-webkit-chromeSafari)、-moz-firefox)、-ms-IE)、-o-opera

8、边框

圆角:border-radius: 5px 4px 3px 2px; /* 顺时针 */

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

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

/* 默认外阴影*/外阴影 :box-shadow:4px 2px 6px #333333;

内阴影: box-shadow:4px 2px 6px #333333 inset;

多阴影: box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

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

round平铺 stretch 拉伸) border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* 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(标志index.png) no-repeat left top/75% 50% , url(标志index.png) no-repeat right bottom/50% 45%;

10、渐变

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2015.html转载请标明出处,谢谢合作!
标签:
  • 效果
  • CSS3
  • 阴影
  • 文本
  • 1
  • text-s