文章目录
background-image:url() ; background:url();
background 背景 background-image:url(’ ‘); background:url(’ '); 背景颜色 background-origin
body{
width: 100%;
height: 100%;
background-image: url(''),url('');可以设置多个背景图片 ， 号分隔 第一张照片是最前面的 no-repeat 不重复
background-repeat:no-repeat,repeat;
background-position: center top,center center;
}
background-image: url(‘’),url(‘’); 可以设置多个背景图片 ， 号分隔 第一张照片是最前面的 no-repeat 不重复
div{
width: 300px;
height: 300px;
background: url('') no-repeat;
/* background-repeat: no-repeat; */
/* background-size: 100% 100%; 根据设置大小进行100% 100%比例*/
background-size: 100% 100%;
background-size: contain;
}
background-size: 100% 100%; 根据设置大小进行100% 100%比例 div 必须设置指定大小不能 宽高100% 自适应 这样会失真
background-size: contain; 在指定宽高里自适应大小并同比例缩放
给body设置背景图100% 自适应 同比例缩放
body{
width: 100%;
height: 100%;
background: url('') no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
图片自适应窗口大小：background-size:contain；或 background-size:100%； 100%;
backgroud-size:cover; 自适应
background-origin
div{
width: 400px;
height: 400px;
background: url('https://img2.baidu.com/it/u=2594126167,1135630243&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667');
background-size: cover; /* 自适应*/
padding: 50px;
border: 20px solid royalblue;
/* background-origin: border-box; */ /* 全部填充铺满 */
background-clip: border-box; /*在指定的绘图区域显示 content指定的内容区域显示 border-box全部 绘图区域*/
}
background-clip: border-box; 在指定的绘图区域显示 content 指定的内容区域显示 border-box 全部 绘图区域
盒阴影文字阴影，文字超出隐藏
盒阴影
box-shadow: 10px 10px 10px 10px #000;
参数1水平阴影的位置，参数2垂直阴影的位置，参数3模糊程度，参数4阴影大小
文字阴影
text-shadow: 10px 10px 10px #3aa53a;
参数1水平，参数2垂直， 参数3模糊度 参数4颜色
边框圆角
border-radius: 10px 10px 5px 3px;
左上角， 右上角 ，左下角， 右下角，
图片拉伸
border-image-source: url('https://img0.baidu.com/it/u=1522410195,1914723044&fm=253&fmt=auto&app=138&f=JPEG?w=250&h=300');
border-image-slice:50; /*图片拉伸*/
border-image-repeat: repeat;
文字超出…
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
选择器
1. 标签元素选择器
<style>
input[type=test]{
background-color: rgb(124, 33, 33);
}
a[data-title=a]{
color: blue;
font-size: 25px;
}
</style>
<a href="" data-title="a">hello world</a>
<input type="test">
<input type="passwrod">
<input type="submit">
2.伪类选择器
/*伪类*/
a:link{
/*没有被访问过的标签样式*/
}
a:visited{
/*访问过后的*/
}
a:hover{
/*鼠标悬停样式*/
}
a:active{
/*鼠标按下*/
}
3. 伪类元素选择器
<style>
p::after{
content:'后';
color:red;
}
p::before{
content:'前';
color: blueviolet;
}
</style>
<a href="" data-title="a">hello world</a>
<style>
ul li:first-child{/*子类第一个*/
color: red;
}
ul li:last-child{/*子类最后一个*/
color: cornflowerblue;
}
ul li:nth-child(4){/*子类元素第几个*/
color:#4fa00d;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
渐变色 linear-gradient()
.box{
width: 200px;
height: 300px;
background: linear-gradient(red, blue,pink,SlateBlue);
}
默认是从上往下渐变
background: -webkit-linear-gradient(left,red, blue,pink,SlateBlue); 从左往右渐变
background: linear-gradient(to bottom right, pink,blue,rgb(153, 58, 73),SlateBlue) 左上角到右下角
background: repeating-linear-gradient(red,yellow 10%,blue 20%); 重复从上往下
background: radial-gradient(pink,blue,yellow); radial 圆
兼容:浏览器
-webkit-谷歌 safari
-moz-火狐
-oopera
| to bottom | 默认值， 从上到下 |
|---|---|
| to top | 从左到右 |
| to left | 从右往左 |
| to right | 从左往右 |
| to bottom right | 左上到右下 |
动画过度 trasform3D,transition2D
trasform
.box1{
width: 500px;
height: 800px;
margin: 100px auto;
background-color: beige;
/*透视实现3D效果必须的属性 距离越小 越明*/
perspective: 800px;
/*默认居中*/
perspective-origin: center center;
/*设置3D效果*/
transform-style: preserve-3d;
}
.toy{
height: 20px;
}
.box{
width: 200px;
height: 200px;
margin:20px auto;
background-color: cornflowerblue;
/*x轴旋转*/
/* transform: rotateX(40deg) */
}
.box:nth-child(2):hover{ /*x轴旋转*/
transform: rotateX(40deg);
}
.box:nth-child(3):hover{ /*y轴旋转*/
transform: rotateY(40deg);
}
.box:nth-child(4):hover{ /*z轴旋转*/
transform: rotateZ(40deg);
}
transform: rotateXYZ(0deg) 正值 负值
transition
.box{
width: 200px;
height: 200px;
background-color: aquamarine;
/* 过度*/
transition-property: all;
/* 过度时间*/
transition-duration:3s ;
/* ease 慢 快 慢*/
transition-timing-function: ease-out;
/* ease-in 慢开始 慢结束 ease-in-out 慢快 慢 liner均匀*/
transition: all 2s linear 2s;
/*2秒 匀速*/
}
.box:hover{
background-color: pink;
margin-left: 300px;
}
.box1{
width: 200px;
height: 200px;
background-color: rgb(58, 14, 129);
transition: all;
transition-duration: 2s;
}
.box1:hover{
width: 210px;
height: 210px;
box-shadow: 10px 10px 10px 10px #000;
}
| transition | 简写属性，用于一个属性设置四个过度属性 |
|---|---|
| transition-property | 规定应用过度css属性名称 |
| transition-duration | 过度时间，默认 0 |
| transition-timing-function | 规定过度效果事件线默认是 ease: 慢-快-慢，ease-in:慢速开始，ease-out:慢速开始，ease-in-out:慢-快-慢，linear:均速 |
| transition-delay | 延迟几秒执行 默认 0 |
@keyframes
.box{
width: 200px;
height: 200px;
background: gold;
/*调用指定的change*/
/* animation-name: change; */
/*时间*/
/* animation-duration: 2s; */
/*过度*/
/* animation-timing-function: linear; */
/*延迟*/
/* animation-delay: 2s; */
/*重复 默认只执行一次 infinite循环*/
/* animation-iteration-count: infinite; */
animation: move 2s linear infinite;
}
@keyframes move{
from{
transform: rotate(0deg)
}
to{
transform: rotate(360deg);
/*鼠标悬浮持续动画 running动画 paused停止*/
animation-play-state: paused;
}
}
@keyframes change{
/*从0到100 from to 过程*/
/* from{
background: pink;
}
to{
background: rgb(126, 10, 172);
} */
}
多列布局
| column-count: 2; | 指定分隔的列数 |
|---|---|
| colun-gap:50; | 列之间的间距 |
| column-rule:1px solid red; | 分割线 |
| column-width:500px; | 列的宽度 |
Flex 弹性盒布局
<style>
.father{
width: 800px;
height: 800px;
border: 1px solid;
/*弹性盒子给父元素设置*/
display: flex;
/*设置方向*/
/* flex-direction: end; */
/*换行*/
/* flex-wrap: wrap-reverse; */
/*定义当前项目在主轴上的排列顺序*/
/* justify-content: space-evenly ; */
/* justify-content:space-between; */
/* justify-content: space-evenly; */
/* justify-content: space-around; */
/* 交叉轴起点对齐 */ /*默认值*/
/* align-items: stretch; */
/* align-items: center; */
/* align-items: flex-end; */
/* align-items: flex-start; */
/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
/*换行水平居中垂居中*/
/* flex-wrap: wrap;
align-content: center;
justify-content: center; */
}
.father div{
width: 300px;
height: 200px;
color: #ffff;
font-size: 50px;
}
.father div:nth-child(1){
width: 100px;
background: rgb(0, 38, 255);
}
.father div:nth-child(2){
background: rgb(0, 255, 42);
}
.father div:nth-child(3){
width: 100px;
background: rgb(9, 99, 105);
}
</style>
</head>
<body>
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.box{
width: 1000px;
height: 1000px;
border: 1px solid #000;
display: flex;
}
.box div{
width: 200px;
height: 100px;
font-size: 50px;
color: aliceblue;
border: 2px solid rgb(160, 73, 73);
background: rgb(11, 148, 125);
margin: 10px;
/*数值越小越往前 比如给所有div设置2唯一个盒子设置为1*/
/* order: 2; */
/*定义子元素放大默认值是0 存在剩余空间 子元素也不会放大 */
/* flex-grow: 1; */
/*如果 给子元素设置 flex-grow 1 则将平分剩余空间*/
/*缩小定义子元素缩小比例 默认值1 如果flex-shrink:0;当前元素不变*/
/* flex-shrink: 1; */
/*等均匀分布*/
/* flex: auto; */
}
.box div:nth-child(2){
/* order: 1; */
/* flex-shrink: 0; */
flex-basis: 500px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<!-- <div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div> -->
</div>
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
