今天学习圆角边框、盒子阴影、文字阴影、CSS浮动。
圆角边框
1 参数值可以用 px 也可以用 %
border-radius: 10px;
<title>圆角边框</title>
<style>
div {
width: 300px;
height: 150px;
background-color: pink;
/* radius 是半径的意思,半径越大,弧度越大 */
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
2 border-radius: 50%;可以让盒子变成圆形或椭圆
border-radius: 50%;
3 border-radius: 50px; 设置为盒子高度的一半,变成圆角矩形
.yuanju {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
3 border-radius:10px 6px 5px 10px; 顺时针左上,右上,右下,左下
.shunshizhen {
width: 200px;
height: 200px;
background-color: pink;
/* 左上——右上——右下——左下 */
border-radius: 10px 40px 5px 60px;
/* 左上对角线10px,另外40px */
/* border-radius: 10px 40px; */
/* 分开写,格式按下面 */
/* border-top-left-radius: 80px;
border-top-right-radius: 60px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 50px; */
}
盒子阴影
box-shadow: 10px 10px 10px 10px red;
水平——垂直——模糊——模糊大小——模糊颜色——外部阴影还是内部 。
注意:
- 默认外阴影(outset),但是不可以写这个单词,否则阴影无效;
- 盒子阴影不占用空间,不会影响其他盒子排列。
<title>盒子阴影</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3);
/* 内阴影 */
/* box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3) inset; */
/* 可以只写两个,水平和垂直阴影 */
/* box-shadow: 20px 10px; */
}
</style>
</head>
<body>
<div></div>
</body>
div:hover 原先盒子没有影子,当鼠标经过,就添加阴影效果:
div:hover {
box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3);
}
文字阴影
text-shadow: 5px 5px 3px black;
水平——垂直——模糊程度——模糊颜色
<title>文字阴影</title>
<style>
p {
font-size: 20px;
color: green;
font-weight: 700;
text-shadow: 5px 5px 3px black;
}
</style>
</head>
<body>
<p>你是阴影,我是火影</p>
</body>
CSS浮动
- 浮动
1 传统网页布局的三种方式:普通流(标准流)、浮动、定位。实际开发一个页面包含了这三种布局方式。
2 标准流:标签按照规定的默认方式排列。最基本的网页布局方式。块元素(div、hr、h、p、ul、ol、li、form、table)独占一行,从上到下;行内元素(span、a、i、em、strong)从左到右排列,碰到父元素边缘自动换行。
3 为什么需要浮动:很多布局方式,标准流无法实现,此时可以利用浮动完成布局,因为浮动可以改变元素标签默认的排列方式。典型应用:多个块级元素一行排列显示。网页布局准则:多个块级元素纵向排列标准流,多个块状元素横向排列找浮动。
<title>浮动-行内块元素相邻缝隙</title>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
/* 相邻行内块之间有空隙 */
/* display: inline-block; */
f