1、CSS3
CSS3 是CSS的下一个版本。也是样式文档（层叠样式表）。
2、选择器
/* 1) 属性选择器 */
/* 选中所有class属性以box开头的标签 */
[class^="box"] {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
}
/* 选中所有class属性以box开头的div标签 */
div[class^="box"] {
background-color: red;
}
/* 选中所有class属性以bbb结束的div标签 */
div[class$="bbb"] {
border-radius: 20px;
}
/* 选中所有class属性包含aaa的div标签 */
div[class*="aaa"] {
opacity: .2;
}
/* 选择文本输入框标签 */
input[type="text"] {
height: 40px;
border: 2px solid blue;
box-sizing: border-box;
float: left;
}
/* 选择submit按钮标签 */
input[type="submit"] {
height: 40px;
border: 2px solid deeppink;
cursor: pointer;
float: left;
}
/* 伪类元素 before after */
.clearfix::after {
content: "";
display: block;
clear: both;
}
ul {
margin-top: 10px;
}
/* 2) 伪类选择器 */
ul li:first-child {
font-size: 40px;
color: red;
}
ul li:last-child {
font-size: 40px;
color: green;
}
ul div:last-child {
font-size: 40px;
color: green;
}
/* 选择第n个 */
ul li:nth-child(2) {
color: purple;
font-weight: bold;
font-size: 30px;
}
ul li:nth-of-type(3) {
color: yellowgreen;
font-weight: bold;
font-size: 20px;
}
/* 选择没有任何内容的标签 */
ul li:empty {
height: 40px;
width: 100px;
background-color: pink;
}
/* 选择除了类名叫.demo的所有其他li标签 */
ul li:not(.demo) {
list-style: none;
}
/* 选择偶数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
ol li:nth-child(2n) {
background-color: red;
}
/* 选择奇数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
ol li:nth-child(2n-1) {
background-color: blue;
}
/* 相邻选择器 */
.current+li {
height: 100px;
}
/* 兄弟选择器 */
.current~li {
opacity: .3;
}3、盒子模型
box-sizing: border-box
/* 盒子模型 */
/* 一种由外边距，边框，内边距，内容组成的思维模型，叫做盒子模型。 */
/* 涉及标签的位置、尺寸 */
/* CSS3 提供了box-sizing这个属性给我们 */
/* 盒子实际大小：边框 + 内边距 + 内容 */
/* 设置box-sizing:border-box; */
/* 盒子实际大小： 内容 */4、弹性布局
通过主轴和侧轴的方式控制子元素的位置和尺寸
5、网格布局
通过行和列的方式控制子元素的位置和尺寸
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style>
/*
布局：
弹性布局 display: flex; 主轴、侧轴
响应式布局 @media
流式布局(百分比布局) 移动端布局 width: 100%; em rem vw vh。。。
网格布局 display: grid; 行，列
PC端布局 (电脑端) 版心， 通栏
布局其实就是关于元素的位置和尺寸的设置。（想把标签放哪个位置，设置多大尺寸）
*/
</style>
</head>
<body>
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
width: 300px;
height: 300px;
background-color: #ccc;
/* 把ul标签做成网格容器 */
display: grid;
/* 设置多少行，每行的高度是多少 */
/* grid-template-rows: 100px; */
grid-template-rows: repeat(1,100px);
/* 设置多少列，每列的宽度 是多少 */
/* grid-template-columns: 100px; */
grid-template-columns: repeat(1,100px);
/* 设置li标签的位置居中 */
justify-content: center;
align-content: center;
}
ul li {
background-color: green;
}
</style>
<!--
<ul>
<li></li>
</ul> -->
<style>
.wrap {
width: 320px;
height: 320px;
background-color: pink;
/* 设置网格盒子 */
display: grid;
/* 设置三行三列标签 */
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
/* 1 : 1 : 1 */
/* grid-template-columns: repeat(3,1fr); */
/* 1 : 2 : 1 */
/* grid-template-columns: 1fr 2fr 1fr; */
/* grid-template-columns: 100px 100px 100px; */
/* 设置行间距 */
row-gap: 10px;
/* 设置列间距 */
column-gap: 10px;
/* 设置网格标记 (划分网格容器的区域)*/
grid-template-areas: 'a b c'
'e f g'
'h i j';
}
.item {
/* background-color: green; */
/* border: 1px solid #ccc; */
}
.bg-red {
background-color: red;
/* 设置标签到f的位置 */
grid-area: j;
}
.bg-green {
background-color: green;
grid-area: g;
}
.bg-blue {
background-color: blue;
grid-area: f;
}
.bg-yellow {
background-color: yellow;
grid-area: c;
}
.bg-orange {
background-color: orange;
grid-area: h;
}
.bg-deepskyblue {
background-color: deepskyblue;
grid-area: i;
}
</style>
<div class="wrap">
<div class="item bg-red"></div>
<div class="item bg-green"></div>
<div class="item bg-blue"></div>
<div class="item bg-yellow"></div>
<div class="item bg-orange"></div>
<div class="item bg-deepskyblue"></div>
</div>
</body>
</html>6、CSS3 变量
<style>
/* 1) 定义变量 */
:root {
--color: #ff5500;
--fontSize: 100px;
--bgColor: pink;
--borderRadius: 10px;
--marginBottom: 20px;
}
.box {
font-size: 45px;
font-weight: bold;
/* 2) 使用变量 */
margin-bottom: var(--marginBottom);
}
.box {
color: var(--color);
}
.box-1 {
font-size: var(--fontSize);
}
.box-2 {
background-color: var(--bgColor);
}
.box-3 {
background-color: deepskyblue;
border-radius: var(--borderRadius);
padding: 20px 0;
}
</style>
<div class="box box-1">LOGO</div>
<div class="box box-2">导航</div>
<div class="box box-3">主题</div>7、背景
8、边框图片
9、阴影
10、渐变
<style>
/* 1） 背景 */
.box-1 {
width: 100px;
height: 100px;
border: 20px dashed red;
padding: 50px;
background-image: url(./images/one1.jpg);
background-repeat: no-repeat;
/* 设置图片从边框开始渲染 (内边距、内容), 背景图的起点*/
background-origin: border-box;
/* background-origin: padding-box; */
/* background-origin: content-box; */
/* 把边框部分的背景图裁剪掉 (内边距、内容)*/
background-clip: content-box;
/* 处理精灵图的背景，可以使用这些新增背景属性 */
}
/* 2）边框背景图 */
.box-2 {
width: 200px;
height: 400px;
margin: 50px;
background-color: #ccc;
border: 20px solid transparent;
/* 设置标签边框图片 */
border-image-source: url(./images/border-image2.png);
/* 裁剪边框背景图 */
border-image-slice: 60 60 60 60;
/* 设置边框背景图平铺repeat，round(推荐) repeat */
border-image-repeat: round;
/* 设置边框背景图的尺寸 */
border-image-width: 20px;
/* 设置边框背景图的位置 */
border-image-outset: 10px;
}
/* web字体 */
/* 1）定义字体 */
@font-face {
font-family: abc;
src: url(./fonts/abc.ttf);
}
/* 3) 阴影 */
/* 盒子阴影 */
.box-3 {
margin: 50px;
width: 100px;
height: 100px;
/* 设置阴影 （offsetX,offsetY,模糊度, 延伸(可选) , 阴影颜色, 内阴影(可选)） */
/* offsetX: 正数 水平偏右，否则反之 */
/* offsetY: 正数 水平偏下，否则反之 */
/* box-shadow: 0px 0px 10px red ; */
box-shadow: 0px 0px 10px 5px red inset;
}
/* 文本阴影 */
.box-4 {
width: 600px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
font-size: 50px;
font-weight: bold;
color: #f50;
/* 文本阴影 */
/* 设置阴影 （offsetX,offsetY, 模糊度, 阴影颜色） */
text-shadow: 1px 1px 1px white , -1px -1px 1px green;
/* 2）使用字体 */
font-family: abc;
}
/* 4) 渐变 */
/* 线性渐变（从标签的一侧或角度往标签的另一侧或角度进行颜色的改变） */
.box-5 {
width: 200px;
height: 200px;
/* 渐变(background 或 background-image) */
/* background-image: linear-gradient(
to right ,
red,
green,
yellow,
purple
); */
/* deg: 角度单位 */
/* background-image: linear-gradient(
135deg,
red,
green,
yellow,
purple
); */
background-image: linear-gradient(
135deg,
red 20%,
green 20%,
green 40%,
yellow 40%,
yellow 60%,
purple 60%,
purple
);
/* 背景位置 */
/* background-position: -100px 0; */
}
/* 径向渐变 （从中心往四周辐射进行颜色的改变）*/
.box-6 {
width: 200px;
height: 200px;
margin-top: 10px;
/* center left top right bottom */
background-image: radial-gradient(
at 100px 100px,
red,
green,
yellow,
purple
);
}
</style>
<!-- <div class="box-1"></div> -->
<!-- <div class="box-2">乘风破浪、扬帆起航</div> -->
<!-- <div class="box-3"></div> -->
<!-- <div class="box-4">态度、细节、目标、行动</div> -->
<div class="box-5">hello world</div>
<div class="box-6">title</div>11、过渡
<!-- 可以看见标签从一个属性变化到另一个属性值的过程。 过渡 -->
<style>
.box-1 {
width: 100px;
height: 100px;
background-color: #ccc;
}
.box-1:hover {
width: 1000px;
}
.box-2 {
width: 100px;
height: 100px;
background-color: #f00;
/* 设置过渡属性: 过渡属性(all) 过渡持续的时间 0s延迟 linear匀速 （贝塞尔曲线值） */
/* transition: width .5s 0s linear; */
transition-property: width;
transition-duration: .5s;
/* transition-timing-function: linear; */
/* transition-timing-function: cubic-bezier(0.035, 1.650, 0.670, 1.335); */
transition-timing-function: cubic-bezier(.19,1.5,.86,1.64);
transition-delay: 0s;
}
.box-2:hover {
width: 1000px;
}
</style>
<div class="box-1"></div>
<div class="box-2"></div>
<script>
// 例如： 不使用animate方法做轮播图的时候，可以考虑使用transition完成这个轮播图
// 就需要借助这个事件去实现无缝衔接~~
// 监听过渡结束的事件
document.querySelector(".box-2").addEventListener("transitionend",function(){
// 过渡结束触发事件
console.log("过渡结束了~")
})
</script>12、动画
/* 1) 定义动画 */
/*
@keyframes ani {
0% {
width: 100px;
}
100% {
width: 1000px;
}
}
*/
@keyframes ani {
from {
width: 100px;
}
to {
width: 1000px;
}
}
.box {
/* 2) 使用动画 */
/* 动画名称 */
animation-name: ani;
/* 动画持续的时间 */
animation-duration: 5s;
/* 动画运动的状态 */
animation-timing-function: linear;
/* 动画的次数（infinite: 无限次） */
animation-iteration-count: infinite;
/* forwards: 动画结束 停留在的动画结束的位置。*/
/* animation-fill-mode: forwards; */
/* 是否延迟执行动画 */
animation-delay: 0s;
/* 动画运动方向 */
animation-direction: reverse;
/* 外边距 */
margin: 0 auto;
/* 简写 */
/* animation: ani .5s linear 1 forwards 0s reverse ; */
}
.box-3:hover {
/* 暂停动画 */
animation-play-state: paused;
} 13、转换(位移、缩放、旋转、角度倾斜)
<style>
.parent {
width: 300px;
height: 300px;
background-color: #ccc;
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
/* 设置3d空间 */
/* transform-style: preserve-3d; */
/* 设置透视距离(眼睛到界面的距离视距) 近大远小*/
/* perspective: 500px; */
}
.parent .child {
width: 100px;
height: 100px;
background-color: red;
/* 设置旋转中心 */
/* transform-origin: left top; */
/* 转换属性 (不会让标签脱离正常文档流)*/
/* transform: 旋转 位移 缩放 倾斜; */
/* rotateX Y Z 围绕坐标轴旋转 */
/* rotate3d 围绕对角线旋转 */
/* translate3d(X轴 , Y轴 ,Z轴) 位移,就是设置元素位置的意思*/
/* scale(倍数) 缩放 */
/* skew(角度) 角度倾斜*/
transform: rotate3d(1,1,0,0deg) translate3d(0px,0px,0) scale(1) skew(0deg);
}
</style>
<div class="parent">
<div class="child"></div>
</div>
yle>
.parent {
width: 300px;
height: 300px;
background-color: #ccc;
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
/* 设置3d空间 */
/* transform-style: preserve-3d; */
/* 设置透视距离(眼睛到界面的距离视距) 近大远小*/
/* perspective: 500px; */
}
.parent .child {
width: 100px;
height: 100px;
background-color: red;
/* 设置旋转中心 */
/* transform-origin: left top; */
/* 转换属性 (不会让标签脱离正常文档流)*/
/* transform: 旋转 位移 缩放 倾斜; */
/* rotateX Y Z 围绕坐标轴旋转 */
/* rotate3d 围绕对角线旋转 */
/* translate3d(X轴 , Y轴 ,Z轴) 位移,就是设置元素位置的意思*/
/* scale(倍数) 缩放 */
/* skew(角度) 角度倾斜*/
transform: rotate3d(1,1,0,0deg) translate3d(0px,0px,0) scale(1) skew(0deg);
}
</style>14、Web字体
/* 1) 定义字体 */
@font-face {
font-family: aoyun;
src: url(./font/aoyun.ttf);
}
@font-face {
font-family: jinghong;
src: url(./font/jinghong.ttf);
}
@font-face {
font-family: qimeng;
src: url(./font/qimegn.TTF);
}
@font-face {
font-family: ranbao;
src: url(./font/ranbao.ttf);
}
div {
font-size: 40px;
margin-top: 20px;
}
div:nth-child(2) {
/* 2) 使用字体 */
font-family: aoyun;
}
div:nth-child(3) {
font-family: jinghong;
}
div:nth-child(4) {
font-family: qimeng;
}
div:nth-child(5) {
font-family: ranbao;
}15、裁剪 clip-path
<style>
div {
margin-bottom: 10px;
}
.box-1 {
width: 200px;
height: 200px;
background-color: red;
}
.box-2 {
width: 200px;
height: 200px;
background-color: red;
/* 矩形 多边形 圆形 ... */
clip-path: circle(
/* 半径 */
100px
/* 圆心坐标 */
at 0px 0px);
}
.box-3 {
width: 200px;
height: 200px;
background-color: red;
/* 圆心坐标（r1,r2） */
/* clip-path: ellipse(100px 30px at 100px 100px); */
/* 多边形 */
clip-path: polygon(25% 10%, 60% 0%, 75% 100%, 50% 100%);
}
</style>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>15.1 矩形
inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round 可选，圆角）
.juxing{
width: 50px;
height: 40px;
background: red;
clip-path: inset(25% 20% 25% 0% round 0 25% 0 25%);
}通过round关键字来指定圆角，顺序也是顺时针（上右下左）
15.2 圆形
circle(半径 at 圆心位置) ，半径支持百分比
.yuanxing{
width: 50px;
height: 40px;
background: red;
clip-path: circle(30% at 25px 20px);
}15.3 椭圆
ellipse(x轴半径 y轴半径 at 圆心) 半径支持百分比
.tuoyuan{
width: 50px;
height: 40px;
background: red;
clip-path: ellipse(50% 30% at 25px 20px);
}15.4 多边形
polygon( <fill-rule>?,[<length-percentage> <length-percentage> ]# )
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero.后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点
以矩形的左上角为例，
左上角的点是(0% 0%) ，
左下角的点是（0% 100%）
通过设置点的位置来实现裁剪，
不同点直接用逗号分隔
点的位置按照顺时针的顺序排列
15.5 平行四边形
之前做过平行四边形，用的是transform: skewX(45deg); ，现在也可以通过裁剪来实现
.pxsbx{
width: 50px;
height: 40px;
background: red;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}15.6 直角三角形
.zjsjx {
width: 50px;
height: 40px;
background: red;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}15.7 直角梯形
.zjtx {
width: 50px;
height: 40px;
background: red;
clip-path: polygon(0% 0%, 40% 0%, 100% 100%, 0% 100%);
border-top-left-radius: 20%;
}15.8 结合css过渡属性和动画属性
.outer{
width:100px;
height: 100px;
background:orange;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
transition:0.5s clip-path;
}
.outer:hover{
clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);
}16、倒影
<style>
.box {
width:256px;
height: 320px;
background-image: url(./images/one1.jpg);
/* 倒影 */
-webkit-box-reflect: below 10px;
}
.demo {
height: 100px;
background-color: green;
}
</style>
<!-- <div class="box"></div>
<div class="demo"></div> -->17、模糊度
<style>
.aaa {
width: 100px;
height: 100px;
background-color: red;
/* 模糊度 */
filter: blur(30px);
}
.big {
width: 100px;
height: 200px;
position: relative;
}
.big .small {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/* background-image: url(./images/one1.jpg); */
background-image: url(./images/three2.jpg);
}
.big .s-1 {
filter: blur(30px);
}
.big .s-2 {
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-size: 100px 100px;
background-position: center;
background-repeat: no-repeat;
}
</style>
<div class="big">
<div class="small s-1"></div>
<div class="small s-2"></div>
</div>
扫一扫
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
