css基础-7-圆角边框、盒子阴影和文字阴影

最新推荐文章于 2024-04-17 21:07:38 发布

Neptuneyut

最新推荐文章于 2024-04-17 21:07:38 发布

阅读量480

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/qq_42491125/article/details/106458900

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

圆角边框
盒子阴影
文字阴影
参考

圆角边框

CSS3中新增圆角边框可以设置带有弧度的形状

border-radius设置圆角边框，值为数值或者元素宽高百分比，需正方形
设置方式
- border-radius: 左上右上右下左下：四个值从左上顺时针设置四角的弧度
- border-radius: 左上/右下右上/左下：两个值设置效果
- border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius：单独设置4个角

在这里插入图片描述

盒子阴影

box-shadow：设置盒子阴影效果

值	描述
h-shadow	水平位移距离（必需，相对盒子的左上角）
v-shadow	垂直位移距离（必需，相对盒子的左上角）
blur	阴影虚实程度，越大越虚
spread	阴影面积大小
color	阴影颜色，常`rgba`
inset	将默认外部阴影改成内部阴影）

在这里插入图片描述

文字阴影

text-shadow：设置文字阴影效果

值	描述
h-shadow	水平位移距离（必需，相对盒子的左上角）
v-shadow	垂直位移距离（必需，相对盒子的左上角）
blur	阴影虚实程度，越大越虚
color	阴影面积大小，常用`rgba`

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: orange;
            font-size: 50px;
            text-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <h1>
        SPACE X
    </h1>
</body>

</html>

在这里插入图片描述

参考

黑马pink老师

Neptuneyut

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css基础-7-圆角边框、盒子阴影和文字阴影

文章目录圆角边框盒子阴影文字阴影参考圆角边框CSS3中新增圆角边框可以设置带有弧度的形状border-radius设置圆角边框，值为数值或者元素宽高百分比，需正方形设置方式border-radius: 左上右上右下左下：四个值从左上顺时针设置四角的弧度border-radius: 左上/右下右上/左下：两个值设置效果border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bott
复制链接

扫一扫