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

bit..

已于 2023-02-16 15:45:06 修改

阅读量601

点赞数 1

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

于 2023-02-16 15:44:22 首次发布

本文链接：https://blog.csdn.net/weixin_68773927/article/details/129062773

版权

html和css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章介绍了CSS3中的三个重要样式特性：border-radius用于创建圆角边框，box-shadow添加盒子阴影，text-shadow设置文字阴影。详细阐述了每个属性的语法、参数以及使用示例，包括如何控制阴影的方向、模糊度和颜色。

摘要由CSDN通过智能技术生成

1.圆角边框（重点）

2.盒子阴影（box-shadow）

3.文字阴影（text-shadow）

1.圆角边框（重点）

border-radius 属性用于设置元素的外边框圆角。

语法：

border-radius: length;

radius半径（圆的半径）原理:(椭)圆与边框的交集形成圆角效果。

!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>Document</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div>
        <div class="header">
            C罗
        </div>
    </div>
</body>

使用：语法：border-radius：length;

参数值可以为数值或者百分比的形式。
如果是正方形，想要设置一个圆，数值为高度或者宽度的一般，百分比为50%。
如果是一个矩形，设置为高度的一般。
该属性是一个简写属性，可以跟随四个值，分别代表左上角，右上角，左下角，右下角。
分开写： border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-bottom-radius。

2.盒子阴影（box-shadow）

在css3中新增盒子阴影 box-shadow

语法： box-shadow：h-shadow v-shadow blur spread color inset；

值	描述
h-shadow	必需，水平阴影的位置允许负值
v-shadow	必需，垂直阴影的位置允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色，请参照CSS颜色值
inset	可选，将外部阴影（outset）改为内部阴影

半透明：rgba（0,0,0, .3）

注意：

默认的是外部阴影（outset）但是不可以写这个单词，否则导致阴影无效。
盒子阴影不占空间，不会影响其他盒子排列。

3.文字阴影（text-shadow）

语法：

text-shadow：h-shadow v-shadow blur color ；

值	描述
h-shadow	必需，水平阴影的位置允许负值
v-shadow	必需，垂直阴影的位置允许负值
blur	可选，模糊距离
color	可选，阴影的颜色，请参照CSS颜色值