前端必知：24.设置圆角和设置阴影效果

小姚学前端

已于 2023-07-23 19:18:30 修改

阅读量3.5k

点赞数 4

分类专栏： HTHL+CSS 文章标签：前端

于 2023-07-23 18:44:37 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/131882547

版权

HTHL+CSS 专栏收录该内容

38 篇文章 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属性实现的。该属性允许我们为元素添加一个或多个阴影效果，可以控制阴影的颜色、位置、大小和模糊度等参数。

阴影效果可以为元素提供一种立体感，使其在页面中脱颖而出。通过巧妙地运用阴影效果，我们可以营造出按钮的按下效果、卡片的浮动效果或者图像的浮起效果等。阴影效果的使用可以增加用户界面的深度和视觉层次感，提升用户体验。

总的来说，设置圆角和设置阴影效果是前端开发中常用的技巧，用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧，我们可以创造出各种独特和吸引人的界面效果。然而，在使用这些样式技巧时，也需要注意不要过度使用，以免影响用户界面的可读性和可用性。

小姚学前端

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知：24.设置圆角和设置阴影效果

设置圆角和设置阴影效果是前端开发中常用的技巧，用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧，我们可以创造出各种独特和吸引人的界面效果。然而，在使用这些样式技巧时，也需要注意不要过度使用，以免影响用户界面的可读性和可用性。
复制链接

扫一扫