Day18圆角与盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角</title>
<style>
div{
width: 200px;
height: 200px;
margin: 90px auto;
background-color: orange;
/* border-radius: 20px; */
/* 从左上角顺时针赋值，没有取值的角与对角的元素相同 */
border-radius: 30px 40px 20px 60px;
/* 当只有三个或两个赋值时按照上述规则即可 */
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
圆角的常见应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角的常见应用</title>
<style>
img{
width: 200px;
height: 200px;
/* 令该照片为正圆，令圆角属性为宽高的一半即可，可用数值或百分比 */
/* 百分比越小越正，但50%已经是正圆了，再调大也不会有变化 */
border-radius: 50%;
}
div{
width: 200px;
height: 80px;
background-color: orange;
/* 给盒子设置胶囊形状,令盒子的圆角属性为盒子高度的一半 */
border-radius: 40px;
}
</style>
</head>
<body>
<img src="../JAVA前端/12234-C.webp">
<div></div>
</body>
</html>
盒子模型--阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴影</title>
<style>
div{
margin: 50px auto;
width: 200px;
height: 80px;
background-color: orange;
box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5 );
/* 也可以在结尾加上inset实现内阴影，但不常用 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
浙公网安备 33010602011771号