当前位置：首页 > news >正文

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

news 来源：原创 2025/4/20 10:49:49

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颜色值