前端学习：圆角边框、盒子阴影、文字阴影

最新推荐文章于 2024-03-18 12:49:52 发布

real_laugh

最新推荐文章于 2024-03-18 12:49:52 发布

阅读量895

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/real_laugh/article/details/122987423

版权

一、圆角边框

border-radius属性可以使盒子编程圆角。

原理：

语法：
border(-top/bottom-left/right)-radius: length;
注：length可以为数值或百分比形式。
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
如果是个矩形，想要设置为圆角矩形，把数值修改为高度的一半即可。
该属性可以设置多个值。
两个值：分别代表左上和右下，左下和右上
四个值，分别代表左上角、左下角、右下角、左下角。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        .yuanjiao {
            width: 200px;
            height: 50px;
            background-color: pink;
            border-radius: 10px;
        }

        .yuanxing {
            width: 500px;
            height: 500px;
            background-color: pink;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="yuanjiao"></div>
    <div class="yuanxing"></div>
</body>

</html>

效果图：

二、盒子阴影

box-shadow属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
属性值：

属性值	描述
h-shadow(必需)	水平阴影位置，允许负值。
v-shadow(必需)	垂直阴影位置，允许负值。
blur(可选)	模糊距离。
spread(可选)	阴影尺寸。
color(可选)	阴影的颜色。
inset(可选)	将外部阴影改为内部阴影。如果是外阴影，该属性不写；如果是内阴影，则写上inset。

注：盒子阴影不占用控件，不会影响其他盒子排列。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }

        /* 原先盒子没有影子，当鼠标经过盒子时添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果图(鼠标经过前与鼠标经过后)：

三、文字阴影

text-shadow属性将阴影应用于文本。
语法：
text-shadow: h-shadow v-shadow blur color;
属性值：

属性值	描述
h-shadow(必需)	水平阴影位置，允许负值。
v-shadow(必需)	垂直阴影位置，允许负值。
blur(可选)	模糊距离。
color(可选)	阴影的颜色。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>
        你是阴影，我是火影
    </div>
</body>

</html>

效果图：

real_laugh

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端学习：圆角边框、盒子阴影、文字阴影

一、圆角边框border-radius属性可以使盒子编程圆角。原理：语法： border(-top/bottom-left/right)-radius: length;注：length可以为数值或百分比形式。如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。如果是个矩形，想要设置为圆角矩形，把数值修改为高度的一半即可。该属性可以设置多个值。两个值：分别代表左上和右下，左下和右上四个...
复制链接

扫一扫