网页制作:初步了解CSS3(1)-web前端

134 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第13天,点击查看活动详情

现在很多想学习网页制作web前端的人都对CSS3比较有兴趣,然而却不知道什么是CSS3和它到底什么东西?以及它是怎么应用的,用于制作什么?

其实CSS3和HTML5都不神秘,CSS3 是最新的 CSS 标准,CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等等。

其中最重要的 CSS3 模块包括:

选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

CSS3在原本的CSS样式里面新增了许多属性!

例如:

border-radius //向标签添加圆角

例如:border-radius:5px;

box-shadow //向标签添加阴影

例如:box-shadow:10px 10px 5px #888

border-image //使用图片来创建边框

background-size //规定背景图片的尺寸

例如:background-size:100% 100%

background-origin //规定背景图片的定位区域

例如:background-origin:content-box

多重背景图片:background-image:url(yue_1.jpg),url(yue_2.jpg);

text-shadow //可以向文本添加阴影

例如:text-shadow:10px 10px 5px #888;

分别代表水平阴影、垂直阴影、模糊距离,以及阴影的颜色

word-wrap //属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

例如:word-wrap:break-word;

CSS3还有许多有趣的属性,但是由于现在CSS3还存在一些兼容性的问题,某些浏览器会有不兼容的情况,所以大家写网页的时候需要更具实际的情况来使用,切勿滥用!

CSS3的属性用于手机网站比较多点,PC端的网站根据实际情况来使用比较好!

在后面的文章之中会继续讲解CSS3的其它有趣属性!

关注公众号(月影WEB),了解更多的前后端知识;

欢迎大家关注互相交流学习;