资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/CSS3学习笔记

CSS3学习笔记

wenshi11019 / 2275人阅读

摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

CSS3 被划分为模块

其中最重要的 CSS3 新增实用模块包括：

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

CSS3 边框:

　　用于创建圆角

  • border-radius: 倒角(px); 

　　用于向方框添加阴影

  • box-shadow:水平(px),竖直(px),模糊度(px),颜色() ;  

　　使用图片来创建边框

  • border-image:URL,width,height; 

CSS3 背景:

       规定背景图片的尺寸

  • background-size:width,height; 

       规定背景图片的定位区域

  • background-origin:

　　规定背景的绘制区域

  • background-clip:背景图片可以放置于 content-box、padding-box 或 border-box 区域 ;

CSS3 文本效果:

　　向文本应用阴影

  • text-shadow:水平(px),竖直(px),模糊度(px),颜色() ; 

　　强制文本进行换行 - 即使这意味着会对单词进行拆分

  • word-wrap:默认不换行,设置为break-word时换行; 

　　引入自定义文本样式

  • @font-face:先定义字体名称如@font-fanmily:demo;再使用src:URL映入自定义的字体样式 ; 

2D/3D转换

 @keyframes 规则，创建动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

CSS3多列

　　属性规定元素应该被分隔的列数

  • column-count:列数;

　　属性规定列之间的间隔

  • column-gap:gap(px);

　　属性设置列之间的宽度、样式和颜色规则

  • column-rule:width(),style(常用:outset),color();

CSS3用户界面

　　规定是否可由用户调整元素尺寸(如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll)

  • resize:常用none(不允许)或both(允许调整长和高);

　　允许您以确切的方式定义适应某个区域的具体内容

  • box-sizing:content-box||border-box||inherit;(不太实用)

　　对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

  • outline-offset:length(px)(轮廓与边框边缘的距离);

 最后是应用CSS3新特性做的一个动画特效 https://www.cnblogs.com/Lazy-Cat/p/9750244.html

觉得文章不错的,点个关注和赞吧.

 

idc机房托管 专线服务 学习笔记 学习笔记一 基础学习笔记 深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1675.html

相关文章

  • CSS3 3D学习笔记

    摘要：最近学习了的动画在这里做一个总结。也可以用复合属性移动图片正方向的左边移动也就是我们的右边不要以为始终是是数学数轴的轴方向。其中值为默认值，表示所有子元素在平面呈现。更多的还是需要结合代码修改练习去体会。 最近学习了CSS3的动画,在这里做一个总结。现在大部分的交互动画,我们都可以使用CSS3来完成,效率更高，并且在移动端上的兼容非常好。但是缺少一种正向编程的快感(个人感觉)。 先引出...

    DevTalking 评论0 收藏0

  • CSS学习笔记(七) 背景

    摘要：任何方向上都不重复只让背景图片显示一次。，背景图片就会以段落的中心点为起点。第一个值表示水平位置，第二个值表示垂直位置。拉大图片，使其完全填满背景区保持宽高比。提示渐变是帮我们生成的背景图片。 在CSS里面，每个元素盒子都可以想象成由两个图层组成。 前景层：内容（如文本或图片）和边框。 背景层：用实色填充（使用 background-color 属性），也可以包含任意多个背景图片（...

    Pikachu 评论0 收藏0

  • Canvas学习笔记（一）

    摘要：学习资源来自慕课网炫丽的倒计时效果绘图与动画基础，非常感谢老师的课程分享创建标签的标签定义了一块画布，我们所有的绘图都是基于这一块画布。正是因为是基于状态的，所以不同的状态应该有明确的起始标志。 喜欢前端，学习前端的最原始的动机，就是因为它可以制作非常酷炫的效果。然而现在上班所用的技巧，多是在业务逻辑那一块，并非是我最初想要去做的东西。所以在下班以后，打算重新拾起自己的兴趣，去学习真正...

    codecraft 评论0 收藏0

发表评论

登陆后可评论

0条评论

wenshi11019

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<