优秀的编程知识分享平台

网站首页 > 技术文章 正文

Web开发学习笔记(31)——CSS3(5)新增特效4

nanyue 2024-10-31 13:50:00 技术文章 4 ℃

（1）圆角边框在 CSS3 中，使用 border-radius 属性来设置圆角边框。

border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。

其语法格式为：

border-radius: 取值;

我们也可以分开设置四个角的属性值，语法如下所示：

border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-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:200px;
            height:200px;
            background-color:rgb(163, 161, 161);
            border-radius: 140px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

可以使用 border-radius 属性来灵活变换元素的形状了，大家快点发挥想象创造一些好看的图形

（2）设置边框颜色的属性：border-color 属性

知识点

  • border-color 属性

border-color 属性可以给元素设置上下左右四个边框的颜色。

其语法结构为：

border-color: 上边框值 右边框值 下边框值 左边框值;

也可分开设置边框每条边的属性值。

border-top-color: 取值;
border-right-color: 取值;
border-bottom-color: 取值;
border-left-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>Document</title>
    <style>
        div{
            width:400px;
            height:400px;
            border-style: solid;
            border-color: rgb(255, 182, 182) rgb(123,234,234) rgb(84, 105, 163) rgb(255, 238, 107);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

（3）设置边框阴影的属性：box-shadow 属性

知识点

  • box-shadow 属性

box-shadow 属性可以用来设置一个或多个下拉阴影的框，视觉效果就像是盒子有了阴影一样。

其语法格式为：

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

其属性值的意义如下所示：

值

说明

h-shadow

必选，水平阴影的位置，允许负值。

v-shadow

必选，垂直阴影的位置，允许负值。

blur

可选，模糊距离。

spread

可选，阴影的大小。

color

可选，阴影的颜色。

inset

可选，将外部阴影改为内部阴影。

举个例子来看看吧～

新建一个 index.html 文件，在其中写入以下内容。

<!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:200px;
            height:200px;
            text-align:center;
            background-color:rgb(218, 255, 131);
            box-shadow: 10px 10px 5px #6a29ac
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面上有一个宽为 200px、长为 100px 且具有绿色背景颜色的 div 元素，我们使用 box-shadow: 10px 10px 5px #26ad8c 设置了水平值为 10px，垂直值为 10px，模糊距为 5px，阴影颜色为 #6a29ac 的边框阴影。

练习：挑战要求：新建一个 index1.html 文件。页面上有一个高和宽均为 100px 的正圆形 div 元素，其元素带有一个绿色的边框阴影。

<!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:200px;
            height:200px;
            text-align:center;
            background-color:black;/*rgb(218, 255, 131);*/
            border:1px solid steelblue;
            border-color:aquamarine;
            box-shadow: 5px 5px 10px #88759b;
            border-radius:100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表