css3学习

Css3

css3简介

重要的css3板块

1. 选择器
2. 盒子模型
3. 背景和边框
4. 文字特效
5. 2d、3d转换
6. 动画
7. 多列布局
8. 用户界面
   Css3边框
9. 圆角
   Border-radius
   Border-top-left-radius
10. 盒阴影
    Box-shadow
    例如box-shadow:10px 10px 5px #888；
    水平 垂直 扩散的模糊范围 颜色
11. css边界图片
    border-image允许你指定一个图片作为边框
    source slice width outset repeat|initial|inherit
    路径 宽度 重复方式round平铺重复 stretch拉伸

Css3圆角

1． 指定每个圆角4个值
2． 椭圆边框border-radius:

Css3背景

1. ①background-image
   添加背景图片
   背景叠加 不同图片之间用逗号隔开，第一张为最上层
   ②Background-position：right bottom, left top;从左向右设置图片位置
   第一张在右中，第二张在左上
   以上两种合并background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
   }
   2.Background-size
   可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
   3.background-origin
   指定了背景图像的位置区域
   content-box, padding-box,和 border-box
2. background-clip
   背景裁剪content-box, padding-box,和 border-box裁剪的剩下

Css3渐变

1. 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
   径向渐变（Radial Gradients）- 由它们的中心定义
   例如：默认（从上到下）
   background-image: linear-gradient(#e66465, #9198e5);
   从左到右
   background-image: linear-gradient(to right, red , yellow);
   对角（左上到又下）
   background-image: linear-gradient(to bottom right, red, yellow);
   角度自定义（180度-180度）
   background-image: linear-gradient(-90deg, red, yellow);
2. 透明度
   Rgba
3. 重复的线性变化
   background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
4. radial-gradient径向变换
   可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）
   语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);
   默认情况
   ① 颜色均匀分布
   background-image: radial-gradient(red, yellow, green);
   ② 颜色分布不均匀
   background-image: radial-gradient(red 5%, yellow 15%, green 60%);
   形状设置
   Shape circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
   不同尺寸大小关键字的使用
   size 参数定义了渐变的大小。它可以是以下四个值：
   closest-side
   farthest-side
   closest-corner
   farthest-corner
   重复径向渐变
   background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

Css3文本效果

1. text-shadow
   文本阴影
   水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
   同box-shadow
   2.box-shadow
   3.text-overflow clip|ellipsis| string（给定字符显示）
   文本溢出显示
   Ellipsis显示…
   Clip修剪

4.word-wrap css3的换行
长单词强制自动换行
p {word-wrap:break-word;}
5. word-break
word-break: keep-all; 不变不拆 word-break: break-all打破

Css3字体

1. CSS3 @font-face 规则 当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户
2. 使用方法
   ① 首先定义字体的名称（比如 myFirstFont）
   
   ② 然后指向该字体文件，引用
   
3. 粗体文本
   添加另一个包含粗体文字的@font-face规则
   ![] ](https://img-blog.csdnimg.cn/20200524201521538.png)

Css32d转换

translate()
左(X轴)和顶部(Y轴)位置给定的参数
transform: translate(50px,100px);
rotate()
给定度数顺时针旋转。负值是允许的
transform: rotate(30deg);
scale（）
元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform:scale(2,3); 宽度为原来的大小的2倍，和其原始大小3倍的高度
skew()
两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜
transform: skew(30deg,20deg) X轴和Y轴上倾斜20度30度
matrix()合并2d（有六个参数，包含旋转，缩放，移动（平移）和倾斜功能）
transform:matrix(0.866,0.5,-0.5,0.866,0,0);

* Css33d转换

rotateX()
rotateY()

• Css3过度
  Transition：过度属性 时间；
  多种变化逗号隔开

* Css3动画

CSS3 @keyframes 规则

① 规定动画的名称时长animation: myfirst 5s;
② 实现变化

Css3多列

column-count
指定了需要分割的列数column-count: 3; 文本分为三列
column-gap
指定了列与列间的间隙指定了列与列间的间隙为 40 像素column-gap: 40px;
column-rule-style
列与列间的边框样式 column-rule-style: solid;
column-rule-width
列与列间的边框样式 column-rule-style: solid;
column-rule-color
指定了两列的边框颜色 column-rule-color: lightblue;
column-rule
设置了列直接的边框的厚度，样式及颜色 column-rule: 1px solid lightblue;
column-span
指定元素跨越（无视分栏）
例指定

元素跨越所有列
h2 {column-span: all;}
column-width
指定列的宽度column-width: 100px;每一栏都是100px，把页面分成总宽/100个

Css3用户界面

Resize
指定一个元素是否应该由用户去调整大小。由用户指定一个div元素尺寸大小
产生一个像textarea的框
div
{ resize:both;
overflow:auto;
}
box-sizing
以确切的方式定义适应某个区域的具体内容 box-sizing:border-box;
outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
轮廓与边框有两点不同：
轮廓不占用空间
轮廓可能是非矩形

Css3图片

1. 圆角图片px 椭圆图片 50%
2. 创建缩略图 border属性 结合padding形成
3. 在a下设置图片，给a设置属性产生缩略图为链接
4. 响应式图片
   （自动是陪各种尺寸的屏幕）
   例如如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值
   max-width: 100%;
   height: auto;
5. 图片文本 设置外侧为相对文本为绝对
   
6. 设置图片滤镜
   CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度)
   filter: grayscale(100%);设置灰度，此时为黑白

Css3按钮button

1. 设置颜色background-color
2. 设置大小通过font-size改变
3. 圆角border-radius
4. 边框颜色border：2px solid 颜色
5. 悬停hover
6. 阴影box-shadow
7. 禁用按钮①通过opacity设置透明度看起来像呗禁用②cursor设置为not-allowed
8. 按钮组设置floatleft使看起来像是组按钮（设置border属性使看起来带边框按钮组）

Css3分页

1. pagination
2. 简单分页
   设置无序列表下每个选项带有连接
   

设置hover，active使其具有变化
设置变化存在过度使用transition: 例如background-color .3s;