前端必知：24.设置圆角和设置阴影效果
时间：2024-04-25 13:20:41 来源：网络cs 作者：焦糖 栏目：运营工具 阅读：
目录
一，设置圆角
使用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属性实现的。该属性允许我们为元素添加一个或多个阴影效果，可以控制阴影的颜色、位置、大小和模糊度等参数。
阴影效果可以为元素提供一种立体感，使其在页面中脱颖而出。通过巧妙地运用阴影效果，我们可以营造出按钮的按下效果、卡片的浮动效果或者图像的浮起效果等。阴影效果的使用可以增加用户界面的深度和视觉层次感，提升用户体验。
总的来说，设置圆角和设置阴影效果是前端开发中常用的技巧，用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧，我们可以创造出各种独特和吸引人的界面效果。然而，在使用这些样式技巧时，也需要注意不要过度使用，以免影响用户界面的可读性和可用性。
本文链接：https://www.kjpai.cn/news/2024-04-25/162125.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
下一篇：返回列表