• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

圆角边框、盒子阴影、文字阴影

1年前 (2021-08-09) 1060次浏览 已收录 1个评论

css新增了圆角边框、盒子阴影以及文字阴影的样式。


圆角边框

它的语法如下:

border-radius:length;
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
<!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>
        .yuanjiaobiankuang {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            border-radius: 20px;
        }

        .yuanxing {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            border-radius: 50%;
        }

        .yuanjiaojuxing {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            border-radius: 100px;
        }

        .teshu {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            border-radius: 50px 0 50px 0;
            /* 也可以这样写,分别是对角线:border-radius: 50px 0; */
        }
    </style>
</head>

<body>
    <div class="yuanjiaobiankuang"></div>
    <div class="yuanxing"></div>
    <div class="yuanjiaojuxing"></div>
    <div class="teshu"></div>
</body>

</html>
结果演示

盒子阴影(重点)

语法如下:

box-shadow: h-shadow v-shadow blur spread color inset;

阴影的颜色一般设置为半透明的黑色,比如这样:rgba(0, 0, 0, .3)

阴影不占用其他元素空间
<!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: 300px;
            height: 400px;
            background-color: aquamarine;
        }

        div:hover {
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
        }
    </style>
</head>

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

</html>
结果演示

文字阴影

语法:

text-shadow: 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>
        p {
            font-size: 50px;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <p>阴影</p>
</body>

</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:圆角边框、盒子阴影、文字阴影
喜欢 (0)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 补充:border-top-right-radius:15px 这是对右上角进行设置
    厚积薄发2021-08-27 09:25