CSS3基础
CSS3新特性 - 样式篇
背景
background-origin： 规定背景图片的定位区域。
? padding-box 背景图像相对内边距定位（默认值）
? border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】
? content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】
备注：默认盒子的背景图片是在盒子的内边距左上角对齐设置。
background-clip： 规定背景的绘制区域。
? border-box 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
? padding-box 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
? content-box 背景被裁切到内容区域【将背景图片在内容区域显示】
background-size： 规定背景图片的尺寸。
? cover
? contain
.box {
width: 400px;
height: 400px;
border: 10px dashed red;
margin: 50px auto;
padding: 30px;
background-image: url("1.png");
background-repeat: no-repeat;
background-origin: content-box; // 与内容部分对齐
background-origin: border-box; // 与Padding部分对齐
background-origin: padding-box; // 与边框对齐
}
.box {
width: 300px;
height: 300px;
border: 10px dashed red;
margin: 50px auto;
padding: 30px;
background-image: url("1.png");
background-repeat: no-repeat;
background-clip: content-box; // 内容部分显示
background-clip: padding-box; // 内容与Padding部分显示
background-clip: border-box; // 内容、Padding与边框显示
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
background: url(2.jpg) no-repeat;
background-size: 200px 200px; // 尺寸内拉伸平铺
background-size: cover; // 左对齐正常尺寸
background-size: contain; // 顶对齐全部显示
}
边框
box-shadow： 盒子阴影
border-radius： 边框圆角
border-image: 边框图片
/* 设置边框图片 */
border-image-source: url("2.png");
/* 边框图片裁切 : 不需要带单位*/
border-image-slice: 20;
/* 设置边框图片的平铺方式 */
/* border-image-repeat: stretch; */
border-image-repeat: round;
/* border-image-repeat: repeat; */
border-image-width: 20px;
.box {
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 10px;
/* 第一个0px
代表阴影在水平方向的偏移量（正数向右，负数向左）
第二个0px
代表阴影在垂直方向的偏移量（正数代表向下，负数代表向上）
第三个10px
代表阴影的模糊度 （不能设置负数）
设置多个阴影，使用逗号隔开
*/
box-shadow:0px 0px 10px red,
5px -5px 10px blue;
}
.box {
width: 347px;
height: 300px;
border: 20px solid red;
margin: 50px auto;
/* 设置边框图片 */
border-image-source: url("2.png");
/* 边框图片裁切 : 不需要带单位*/
border-image-slice: 20;
/* 设置边框图片的平铺方式 */
/* border-image-repeat: stretch; */
border-image-repeat: round;
/* border-image-repeat: repeat; */
border-image-width: 20px;
}
文本
?text-shadow： 设置文本阴影
div {
font-size: 100px;
text-align: center;
padding-top: 100px;
text-shadow: 0px 0px 10px red,
1px -1px 10px blue;
}
CSS3新特性 - 选择器篇
? 属性选择器：
[属性名=值] {}
[属性名] {} 匹配对应的属性即可
[属性名^=值] {} 以值开头
[属性名*=值] {} 包含
[属性名$=值] {} 以值结束
? 结构伪类选择器：
:first-child {} 选中父元素中第一个子元素
:last-child {} 选中父元素中最后一个子元素
:nth-child(n) {} 选中父元素中正数第n个子元素
:nth-last-child(n) {} 选中父元素中倒数第n个子元素
备注；
n 的取值大于等于0
n 可以设置预定义的值
odd[选中奇数位置的元素]
even【选中偶数位置的元素】
n 可以是一个表达式：an+b的格式
? 其他选择器：
:target 被锚链接指向的时候会触发该选择器
::selection 当被鼠标选中的时候的样式
::first-line 选中第一行
::first-letter 选中第一个字符
<style type="text/css">
/* 被锚链接指向的时候会触发该选择器 */
p:target {color: red;}
/* 当使用鼠标选中的时候样式 */
p::selection {
color: red;
background-color: green;
}
</style>
<body>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p id="test">文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<a href="#test">找第10行的p</a>
</body>
- 案例：first-line与first-letter选择器
<style type="text/css">
.one {
width: 200px;
height: 200px;
border: 1px solid red;
word-break: break-all; //允许单词内换行
}
.one:first-line {
color: red;
}
.one:first-letter {
font-size: 50px;
color: blue;
}
/* .one::before {
content: "";
width: 100px;
height: 100px;
background-color: pink;
display: block;
}*/
</style>
<div class="one">
asdfadfafdasfasfdasdfafdasfdadsfasdfafdasdfasdfasdfafdadfafdasdfajsdflkajlfkjafdlkjaslfjalkdsfjalsjfalkdsjfalsfd
</div>
CSS3新特性 - 颜色渐变篇
? 线性渐变：
1. 开始颜色和结束颜色
2. 渐变的方向
3. 渐变的范围
background-image: linear-gradient(
to right,
red,
blue
);
备注：
表示方向：
1. to + right | top | bottom | left
2. 通过角度表示一个方向
0deg [从下向上渐变]
90deg【从左向右】
? 径向渐变：
/* 径向渐变 */
background-image: radial-gradient(
100px at center,
red,
blue
);
<style type="text/css">
.line {
height: 300px;
/*width: 300px; */
/* 实现线性渐变 */
background-image: linear-gradient(
/* to right, */
135deg,
red 20%,
blue 20%,
blue 40%,
red 40%,
red 60%,
blue 60%,
blue 80%,
red 80%
);
background-size: 200px 300px;
}
</style>
<style type="text/css">
.box {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 径向渐变 */
background-image: radial-gradient(
100px at center,
red,
blue
);
}
</style>
CSS3新特性 - 2D转换篇
? 位移
transform: translate(100px,100px);
备注：位移是相对元素自身的位置发生位置改变
? 旋转
transform: rotate(60deg);
备注：取值为角度
? 缩放
transform: scale(0.5,1);
备注：取值为倍数关系，缩小大于0小于1，放大设置大于1
? 倾斜
transform: skew(30deg,30deg);
备注：第一个值代表沿着x轴方向倾斜
第二个值代表沿着y轴方向倾斜
<style type="text/css">
.box {
height: 100px;
background-color: pink;
}
.one {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
.box:hover .one {
/* 2d转换位移： 改变元素位置 */
transform: translate(100px,100px);
/* 设置的是缩放 */
transform: scale(0.5,1);
/* 设置的是旋转 */
transform: rotate(60deg);
/* 设置的是斜切 */
transform: skew(30deg,30deg);
}
</style>
<div class="box">
<div class="one">案例：2D转换</div>
</div>
CSS3新特性 - 3D转换篇
? 位移
transform: translateX() translateY() translateZ()
? 旋转
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
? 缩放
transform: scaleX(0.5) scaleY(1) scaleZ(1);
? 倾斜
transform: skewX(30deg) skewY();
? transform-style: preserve-3d;
将平面图形转换为立体图形
<style type="text/css">
.one {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 100px auto;
/* 透视: 在网页中实现近大远小; */
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 200px;
}
.one:hover .box {
transform: translateZ(200px);
}
</style>
<div class="one">
<div class="box"></div>
</div>
CSS3新特性 - 动画篇
过渡
https://www.cnblogs.com/afighter/p/5731293.html
补间动画：
/* 设置哪些属性要参与到过渡动画效果中： all */
transition-property: all;
/* 设置过渡执行时间 */
transition-duration: 1s;
/* 设置过渡延时执行时间 */
transition-delay: 1s;
/* 设置过渡的速度类型 */
transition-timing-function: linear;
<style type="text/css">
/* 动画的开始状态 ： 浏览中元素的默认显示效果*/
.box {
width: 200px;
height: 200px;
background-color: red;
/* 设置哪些属性要参与到过渡动画效果中： all */
/* transition-property: all; */
/* 设置过渡执行时间 */
/* transition-duration: 1s; */
/* 设置过渡延时执行时间 */
/* transition-delay: 1s; */
/* 设置过渡的速度类型 */
/* transition-timing-function: linear; */
transition: all 1s linear 1s;
}
/* 动画的结束状态 */
.box:hover {
width: 400px;
height: 400px;
background-color: green;
}
</style>
<div class="box"></div>
动画
/* 1定义动画集 */
@keyframes rotate {
/* 定义开始状态 0%*/
from {
transform: rotateZ(0deg);
}
/* 结束状态 100%*/
to {
transform: rotateZ(360deg);
}
}
注意：如果设置动画集使用的是百分比，那么记住百分比是相对整个动画执行时间的。
<style type="text/css">
.box {
width: 0px;
height: 0px;
border-left: 100px solid yellow;
border-right: 100px solid red;
border-bottom: 100px solid green;
border-top: 100px solid pink;
border-radius: 50%;
/* 调用 */
/* 动画名称 */
animation-name: rotate;
/* 设置动画时间 */
animation-duration: 2s;
/* 设置动画执行的次数: infinite 无限执行; */
animation-iteration-count: infinite;
/* 动画执行的速度类型 */
animation-timing-function: linear;
/* 设置动画逆波 */
animation-direction: alternate;
/* 设置动画延时 */
animation-delay: 1s;
/* 设置动画结束时候的状态 */
animation-fill-mode: forwards;
}
.box:hover {
/* 动画暂停 */
animation-play-state: paused;
}
/* 1定义动画集 */
@keyframes rotate {
/* 定义开始状态 0%*/
0% {
transform: rotateZ(0deg);
/*transform: translateX(0px);*/
}
50% {
}
/* 结束状态 100%*/
100% {
transform: rotateZ(360deg);
/*transform: translateX(200px);*/
}
}
</style>
<div class="box"></div>
CSS3新特性 - 网页布局篇
伸缩布局或者弹性布局【响应式布局】
? 设置父元素为伸缩盒子【直接父元素】
display： flex
为什么在伸缩盒子中，子元素会在一行上显示？
1. 子元素是按照伸缩盒子中主轴方向显示
2. 只有伸缩盒子才有主轴和侧轴
3. 主轴： 默认水平从左向右显示
4. 侧轴： 始终要垂直于主轴
? 设置伸缩盒子主轴方向（flex-direction）
flex-direction: row; 【默认值】
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
? 设置元素在主轴的对齐方式( justify-content)
/* 设置子元素在主轴方向的对齐方式 */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
? 设置元素在侧轴的对齐方式 （align-items）
align-items: flex-start;
align-items: flex-end;
align-items: center;
/* 默认值 */
align-items: stretch;
? 设置元素是否换行显示（flex-wrap）
1. 在伸缩盒子中所有的元素默认都会在一行上显示
2. 如果希望换行：
flex-wrap: wrap | nowrap;
? 设置元素换行后的对齐方式（ align-content）
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
/* 换行后的默认值 */
align-content: stretch;
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid red;
/* 设置父元素为伸缩盒子 */
display: flex;
flex-wrap: wrap;
/* 设置换行后的对齐方式 */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
/* 换行后的默认值 */
align-content: stretch;
}
.one {
width: 100px;
height: 100px;
background-color: red;
margin: 2px;
}
.two {
width: 100px;
height: 100px;
background-color: pink;
margin: 2px;
}
.three {
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: 2px;
}
</style>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<style type="text/css">
.box {
width: 577px;
height: 100px;
background-color: pink;
display: flex;
}
.box>div {
background-color: yellowgreen;
}
div.one {
flex: 1;
background-color: red;
}
div.two {
flex: 2;
background-color: blue;
}
div.three {
flex: 1;
}
</style>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS3基础