一、文本阴影
<style>
div{
/* 6px是水平方向位移 */
/* 5px是垂直方向位移 */
/* 3px是模糊程度 */
/* orange模糊颜色 */
text-shadow: 6px 5px 3px orange;
text-shadow: 6px 5px 3px orange,-10px -10px 3px greenyellow;
font-size: 35px;
}
</style>
</head>
<body>
<div>大家好</div>
</body>
二、盒子阴影
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
/* 第四个是阴影大小 */
/* box-shadow: 10px 10px 3px 10px blueviolet,-10px -10px 3px rgb(13, 207, 58); */
box-shadow: 10px 10px 10px orangered inset;
}
</style>
</head>
<body>
<div></div>
</body>
三、圆角边框
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
/* border-radius:支持px 或者百分比
v1,四个角一样
v1,v2,左上右下,右上左下 一致
v1,v2,v3,左上,左下右上,右下
v1,v2,v3,v4,顺时针
*/
/* border-radius: 10px 10px 0px; */
border-top-left-radius: 10px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 10px;
border-top-right-radius: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
/* 30px/60px 水平/垂直 只支持border-radius */
/* border-radius: 30px/60px; */
/* border-radius: 10px 20px 30px 40px/50px 60px 70px 80px; */
/* 圆是盒子的一半 或者 50% */
border-radius: 50px;
border-radius: 50%;
}
.cfx{
width: 500px;
height: 200px;
background-color: blueviolet;
margin: 0 auto;
border-radius: 30px;
}
.byx{
/* 半圆:高是宽的一半
border-radius: 50px 50px 0 0;*/
width: 100px;
height: 50px;
background-color: green;
margin: 0 auto;
border-radius: 50px 50px 0 0;
}
.sx{
/* 扇形 */
width: 100px;
height: 100px;
background-color: orangered;
margin: 0 auto;
border-radius: 0 100px 0 0;
}
</style>
</head>
<body>
<div></div>
<div class="cfx"></div>
<div class="byx"></div>
<div class="sx"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
input{
outline: none;
}
div{
width: 935px;
height: 120px;
border: 1px solid #dedede;
margin: 0 auto;
background: #eceaeb;
border-radius: 15px;
box-shadow: 4px 11px 7px #bfbfbf,-4px 11px 7px #bfbfbf;
}
[type=text]{
width: 683px;
height: 86px;
margin: 17px;
border: 3px solid #cccccc;
border-radius: 4px;
font-size: 25px;
text-indent: 11px;
}
[type=button]{
width: 200px;
height: 83px;
background: green;
border-radius: 5px;
border: 1px solid #5ca3b4;
font-size: 23px;
color: white;
}
</style>
</head>
<body>
<form>
<div>
<input type="text" placeholder="Searcher for css3,html5,jQuery... ">
<input type="button" value="Go">
</div>
</form>
</body>
四、字体引入
<style>
@font-face {
font-family: dyc;
src: url(FZSTK.TTF);
}
div{
font-family: dyc;
font-size: 50px;
color: red;
text-shadow: 5px 0px 0px green;
}
</style>
</head>
<body>
<div>好好学习,天天向上</div>
</body>
五、怪异盒模型
<style>
.box1{
width: 200px;
height: 200px;
background: green;
padding: 30px;
border: 10px solid black;
/* 标准盒模型 */
box-sizing: content-box;
}
.box2{
width: 200px;
height: 200px;
background: red;
padding: 30px;
margin-top: 100px;
border: 10px solid black;
/* 怪异盒模型 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
六、弹性盒
<style>
.box{
width: 500px;
height: 200px;
border: 2px solid black;
margin: 100px auto;
display: flex;
/* 修改主轴方向
row,column row-reverse 水平,竖直 水平反向排列,竖直反向排列*/
/* 弹性盒 */
flex-direction: column-reverse;
}
.box span{
width: 100px;
height: 100px;
border: 1px solid red;
/* 自动水平、垂直居中 */
margin: auto;
}
</style>
</head>
<body>
<!-- 影响:
1.子元素默认横向排列
2.行内元素变成块元素
3.只有一个元素的时候,margin: auto 自动居中-->
<div class="box">
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
</div>
</body>
<style>
.box{
width: 200px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
/* row,column row-reverse 水平,竖直 水平反向排列,竖直反向排列*/
/* 弹性盒 */
flex-direction: column;
/* 调整主轴对齐方向
flex-start
flex-end
center
space-between 两端对齐
space-around 距离环绕 */
justify-content: space-between;
/* 调整侧轴
flex-start
flex-end
center */
align-items: flex-end;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
</body>
折行
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
/* 折行 */
flex-wrap: wrap;
/* 控制折行后行间距 */
align-content: flex-start;
}
.box div{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
<div>6666</div>
<div>7777</div>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
<div>6666</div>
<div>7777</div>
</div>
</body>
<style>
.box{
width: 300px;
height: 120px;
border: 1px solid black;
margin: 10px auto;
display: flex;
/* 弹性盒 */
flex-direction: row;
/* 折行 */
flex-wrap: wrap;
/* 控制折行后行间距 */
align-content: flex-start;
}
.box div{
width: 60px;
height: 60px;
border: 1px solid red;
box-sizing: border-box;
display: flex;
}
.box div img{
width: 40px;
height: 40px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
<div><img src="../image/xx.png" alt=""></div>
</div>
</body>
七、7.1项目——对齐方式
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
}
.box div{
width: 100px;
border: 1px dashed red;
box-sizing: border-box;
}
.div1{
height: 100px;
align-self: flex-start;
}
.div2{
height: 100px;
align-self: flex-end;
}
.div3{
height: 100px;
align-self: center;
}
.div4{
height: 100px;
align-self: baseline;
}
.div5{
/* 拉伸,撑开 */
align-self: stretch;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
<div class="div4">4444</div>
<div class="div5">5555</div>
</div>
</body>
<!-- =============================================== -->
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid black;
margin: 100px auto;
display: flex;
flex-direction: column;
}
.box div{
/* width: 100px; */
height: 100px;
border: 1px dashed red;
box-sizing: border-box;
}
.div1{
align-self: flex-start;
}
.div2{
align-self: flex-end;
}
.div3{
align-self: center;
}
.div4{
align-self: baseline;
}
.div5{
/* 拉伸,撑开 */
/* align-self: stretch; */
}
</style>
7.2项目——调整顺序
<style>
.box{
width: 500px;
height: 200px;
border: 2px solid black;
margin: 100px auto;
display: flex;
/* 从相反方向开始 */
/* flex-direction: row-reverse; */
}
.box div{
width: 100px;
height: 100px;
border: 1px dashed red;
box-sizing: border-box;
}
.div1{
/* order 默认从0开始 */
order: 0;
}
.div2{
order: 3;
}
.div3{
order: 2;
}
.div4{
order: 1;
}
.div5{
order: -1;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
<div class="div4">4444</div>
<div class="div5">5555</div>
</div>
</body>
7.3项目——剩余宽高
<style>
.box{
width: 500px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
display: flex;
}
.box div{
width: 100px;
height: 100px;
border: 1px dashed red;
}
.div1,.div3{
flex: 1;
}
.div2{
/* 占满剩余空间 占据8/10的空间 */
flex: 8;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
</div>
</body>
<!-- ================================================= -->
<style>
.box{
width: 500px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.box div{
width: 100px;
height: 100px;
border: 1px dashed red;
}
/* .div1,.div3{
flex: 1;
} */
.div2{
/* 占满剩余空间 */
flex: 1;
}
</style>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
}
.box1,.box3{
width: 100px;
background-color: yellow;
}
.box2{
/* 占满剩余空间 */
flex: 1;
background-color: brown;
}
</style>
</head>
<body>
<div class="box1">1111</div>
<div class="box2">2222</div>
<div class="box3">3333</div>
</body>