CSS3

作者: 竹子bupt | 来源:发表于2020-02-21 16:15 被阅读0次

1.边框

圆角边:border-radius:25px;

阴影:box-shadow: 10px 10px 5px #888888;(右宽度,下宽度,模糊程度)

边框图片:border-image:url(border.png) 30 30 round;

2,背景

可以规定背景尺寸:background-size:63px 100px;

background-origin 属性规定背景图片的定位区域。可以放置于 content-box、padding-box 或 border-box 区域。

background-clip:规定背景的绘制区域

background-image:url(bg_flower.gif),url(bg_flower_2.gif);设置多个背景图片

3.文本效果

4、使用任意字体

导入字体文件即可

5.对元素进行形状变化(transform)2D 3D

旋转:transform: rotate(30deg);元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

移动:transform: translate(50px,100px);把元素从左侧移动 50 像素,从顶端移动 100 像素

伸缩:transform: scale(2,4); 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

翻转:transform: skew(30deg,20deg);围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度

混合:matrix() 方法需要六个参数,包含数学函数:旋转、缩放、移动以及倾斜元素。

6.过渡(给元素加动画效果)

把鼠标放在元素上时会产生动画效果transition

7。动画animation  @keyframe

自动产生动画效果,本身就是动画

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

0% 是动画的开始,100% 是动画的完成。

简介写法 animation: myfirst 5s linear 2s infinite alternate;

8.多列

可以由用户调节尺寸:resize:both;   overflow:auto;

1em 等于当前的字体尺寸。

相关文章

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • CSS3-目录

    1 CSS3 兼容性 2 CSS3 选择器 3 CSS3 新加属性 4 CSS3 过渡动画 5 CSS3 变型 6...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • css3渐变:线性和径向

    知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...

  • CSS3设置圆角边框 圆角特效代码 CSS3的圆角border-

    CSS3设置圆角边框 css3圆角特效代码 CSS3 border-radius 属性 使用 CSS3 borde...

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • css3 基础

    1. css3 起步 (图形2D旋转) 2. CSS3 模块 CSS3 被划分为模块。其中最重要的 CSS3 ...

  • CSS3:边框与圆角

    知识点: CSS3圆角CSS3盒阴影CSS3边界图片 一、CSS3圆角 border-radius属性 一个最多可...

  • css3圆角

    css3 圆角使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。CSS3 bord...

  • 1217

    资源:css3制作工具css3按钮生成css3制作特殊效果-web前端实验室 浏览器的型号和css3前缀 五种主流...

网友评论

      本文标题:CSS3

      本文链接:https://www.haomeiwen.com/subject/eokqqhtx.html