10个常用的CSS3知识分享
发表时间：2025-10-25 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
随着时代的发展，前端知识也一直在更新，目的是让用户体验更好，工作效率变高。CSS3的出现，让我们可以通过简便的方式，做出更多炫酷的效果，工作中整理了10个常用的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); /* 标准的语法 */
以上就是10个常用的CSS3知识分享的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
