目录
一，设置圆角
使用border-radius 设置圆角
本质
二，阴影设置
box-shadow 设置阴影
inset 设置内阴影
三，案例
1.使用圆角把盒子设置为圆/柠檬
2.使用阴影绘制太阳/月亮
四，总结
一，设置圆角
使用border-radius 设置圆角
border-radius：左上 右上 右下 左下;
左上！=右下 右上=左下
border-radius：左上 右上 右下 ;
左上=右下 右上=左下
border-radius：左上 右上;
左上=右下=右上=左下
border-radius：左上;
本质
实质上，每一个角的上面，都有一个水平半径和一个垂直半径，如果每一个方向上
的半径不同，则需要写成 水平半径/垂直半径
圆角的值也可以设置百分比，一般的制作一个圆可以直接设置50% （必须是正方形）
二，阴影设置
box-shadow 设置阴影
box-shadow：x方向偏移量 y方向的偏移量 阴影的发散度（模糊度）
阴影的宽度 阴影的颜色 阴影的位置（可以忽略）
inset 设置内阴影
box-shadow：10px 10px 20px 0 #ff0 inset；
设置多种阴影使用 , 英文逗号隔开，设置的方式一样
注意：在元素上设置阴影，通常是为了增强元素的立体感，给元素设置阴影
阴影不占据文档流空间，因此不会引起元素盒模型的变化
三，案例
1.使用圆角把盒子设置为圆/柠檬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角</title>
<style>
*{
margin: 0;
padding: 0;
}
.wp , .wp2 , .wp3{
background-color: #04be02;
width: 200px;
height: 200px;
border-radius: 50%;
margin: 20px auto;
overflow: hidden;
}
.wp2{
border-radius: 120px 20px;
}
.wp3{
border-radius: 100px/30px 30px 60px 90px ;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="wp">
<img src="../img/wallhaven-m32r8k_7725x5004.png" alt="">
</div>
<div class="wp2"></div>
<div class="wp3"></div>
</body>
</html>2.使用阴影绘制太阳/月亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阴影</title>
<style>
*{
margin: 0;
padding: 0;
}
/* body{
background-color: #000;
} */
.wp, .wp3 , .wp4{
width: 200px;
height: 200px;
border: 1px #f00 solid;
margin: 50px auto;
box-shadow:10px 10px 10px 0px rgb(23, 211, 67) inset;
}
.wp2{
width: 200px;
height: 200px;
background-color: #ff0;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 0 50px 10px #f60 ;
}
.wp3{
border-radius: 50%;
border: none;
box-shadow: 50px 50px 0px 0px rgb(0, 0, 0) inset;
}
.wp4{
box-shadow:10px 0px 0px 0px #f00,-10px 0 0px 0px rgb(33, 7, 167),
0 -10px 0 0 #ff0 , 0 10px 0 0 #04be02;
}
</style>
</head>
<body>
<div class="wp"></div>
<div class="wp2"></div>
<div class="wp3"></div>
<div class="wp4"></div>
</body>
</html>四，总结
置圆角和设置阴影效果是前端开发中常用的样式技巧，用于美化和增强用户界面的效果。下面我将分别总结这两个方面的认识和看法：
设置圆角（border-radius）：
设置圆角是通过CSS的border-radius属性实现的。该属性允许我们将元素的边框角设置为圆角形状，可以应用于各种HTML元素，如盒子模型、按钮、图片等。圆角的大小可以使用像素值、百分比或其他单位进行定义。
使用圆角可以给网页和应用程序带来更加柔和和现代化的外观。它可以为元素增添一种柔和的感觉，减少了尖角的严格感。圆角还可以用于创建卡片式布局和按钮，使界面看起来更加友好和吸引人。
设置阴影效果（box-shadow）：
设置阴影效果是通过CSS的box-shadow属性实现的。该属性允许我们为元素添加一个或多个阴影效果，可以控制阴影的颜色、位置、大小和模糊度等参数。
阴影效果可以为元素提供一种立体感，使其在页面中脱颖而出。通过巧妙地运用阴影效果，我们可以营造出按钮的按下效果、卡片的浮动效果或者图像的浮起效果等。阴影效果的使用可以增加用户界面的深度和视觉层次感，提升用户体验。
总的来说，设置圆角和设置阴影效果是前端开发中常用的技巧，用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧，我们可以创造出各种独特和吸引人的界面效果。然而，在使用这些样式技巧时，也需要注意不要过度使用，以免影响用户界面的可读性和可用性。
