Css3
css3简介
重要的css3板块
- 选择器
- 盒子模型
- 背景和边框
- 文字特效
- 2d、3d转换
- 动画
- 多列布局
- 用户界面
Css3边框 - 圆角
Border-radius
Border-top-left-radius - 盒阴影
Box-shadow
例如box-shadow:10px 10px 5px #888;
水平 垂直 扩散的模糊范围 颜色 - css边界图片
border-image允许你指定一个图片作为边框
source slice width outset repeat|initial|inherit
路径 宽度 重复方式round平铺重复 stretch拉伸
Css3圆角
1. 指定每个圆角4个值
2. 椭圆边框border-radius:
Css3背景
- ①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 - background-clip
背景裁剪content-box, padding-box,和 border-box裁剪的剩下
Css3渐变
- 线性渐变(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); - 透明度
Rgba - 重复的线性变化
background-image: repeating-linear-gradient(red, yellow 10%, green 20%); - 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文本效果
- 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字体
- CSS3 @font-face 规则 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户
- 使用方法
① 首先定义字体的名称(比如 myFirstFont)
② 然后指向该字体文件,引用
- 粗体文本
添加另一个包含粗体文字的@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图片
- 圆角图片px 椭圆图片 50%
- 创建缩略图 border属性 结合padding形成
- 在a下设置图片,给a设置属性产生缩略图为链接
- 响应式图片
(自动是陪各种尺寸的屏幕)
例如如果你需要自由缩放图片,且图片放大的尺寸不大于其原始的最大值
max-width: 100%;
height: auto; - 图片文本 设置外侧为相对文本为绝对
- 设置图片滤镜
CSS filter 属性用为元素添加可视效果 (例如:模糊与饱和度)
filter: grayscale(100%);设置灰度,此时为黑白
Css3按钮button
- 设置颜色background-color
- 设置大小通过font-size改变
- 圆角border-radius
- 边框颜色border:2px solid 颜色
- 悬停hover
- 阴影box-shadow
- 禁用按钮①通过opacity设置透明度看起来像呗禁用②cursor设置为not-allowed
- 按钮组设置floatleft使看起来像是组按钮(设置border属性使看起来带边框按钮组)
Css3分页
- pagination
- 简单分页
设置无序列表下每个选项带有连接
设置hover,active使其具有变化
设置变化存在过度使用transition: 例如background-color .3s;