189 8069 5689

CSS3的使用技术有哪些

今天小编给大家分享一下CSS3的使用技术有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

成都创新互联公司是一家集网站建设,响水企业网站建设,响水品牌网站建设,网站定制,响水网站建设报价,网络营销,网络优化,响水网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

1、文本效果

阴影: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:字体名称;

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: 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(logoindex.png) no-repeat left top/75% 50% , url(logoindex.png) no-repeat right bottom/50% 45%;

10、渐变

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

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /*标准的语法 */

径向渐变: background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /*标准的语法 */

以上就是“CSS3的使用技术有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


当前文章:CSS3的使用技术有哪些
标题来源:http://cdxtjz.cn/article/jeihge.html

其他资讯