本文是HTML及CSS课程的第十一课。主要介绍的内容为,CSS中如何给盒子添加圆角边框及如何给盒子添加阴影
文章目录
一、边框圆角
1、如何添加边框圆角
在之前的章节里,我们了解到边框是盒子模型中的一个组成部分,并且通过CSS中border
系列属性可以为盒子设置边框的宽度、风格、颜色。在CSS中,还可以利用border-radius
属性,为盒子的边框设置圆角。
2、案例
2.1、案例1 - 给盒子的四角分别设置边框圆角
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 给盒子的四角分别设置边框圆角 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 可以针对盒子的四个角分别设置边框圆角,例子中的
15px
表示圆角半径为15像素。使用的属性说明如下:属性 说明 border-top-left-radius
设置左上角边框圆角 border-top-right-radius
设置右上角边框圆角 border-bottom-right-radius
设置右下角边框圆角 border-bottom-left-radius
设置左下角边框圆角
2.2、案例2 - 统一设置边框圆角为同一个值
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 统一设置边框圆角为同一个值 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果同上一个案例,这里不再展示。
说明:
- 使用
border-radius
属性可以设置盒子的四个边框圆角为同一个值。本例中是border-radius: 15px;
,表示盒子的四个边框圆角半径均为15像素。
2.3、案例3 - 按顺时针顺序设置边框圆角
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 按顺时针顺序设置边框圆角 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
border-radius: 10px 15px 20px 25px;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 使用
border-radius
属性按顺时针方向设置盒子的四个边框圆角,顺序依次为左上角、右上角、右下角、左下角。本例中border-radius: 10px 15px 20px 25px;
设置左上角边框圆角半径为10像素,右上角边框圆角半径为15像素,右下角边框圆角半径为20像素,左下角边框圆角半径为25像素。
2.4、案例4 - 使用百分比设置边框圆角
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 使用百分比设置边框圆角 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 使用百分比的形式设置边框圆角,百分比为圆角半径占
width
和height
属性值的比例。本例中border-radius: 50%;
表示四个边框圆角的横轴半径和纵轴半径分别width
和height
的50%,于是会得到一个椭圆。
2.5、案例5 - 按横轴半径/纵轴半径设置边框圆角
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 按横轴半径/纵轴半径设置边框圆角 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
border-radius: 100px/40px;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
border-radius
属性的值用/
分开,前面的值表示圆角横轴半径,后面的值表示圆角纵轴半径。本例中border-radius: 100px/40px;
表示边框四个圆角的横轴半径均为100像素,纵轴半径均为40像素。
二、盒子阴影
1、如何添加盒子阴影
在CSS中,可以通过box-shadow
属性为盒子添加阴影,该属性的语法格式如下:
box-shadow : [inset] 横向偏移量 纵向偏移量 [模糊范围] [扩展范围] [阴影颜色]
2、案例
2.1、案例1 - 简单的盒子阴影
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 简单的盒子阴影 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
box-shadow: 5px 5px 5px lightgreen;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 本例中
box-shadow: 5px 5px 5px lightgreen;
表示为盒子添加一个向右偏移5像素,向下偏移5像素,模糊范围为5像素,颜色为lightgreen
的阴影。
2.2、案例2 - 内阴影
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 内阴影 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
box-shadow: inset 5px 5px 5px lightgreen;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 设置了
inset
时,显示为内阴影,不设置inset
时,显示为外阴影(投影)。 inset
也可以写在所有属性值的最后,如:box-shadow: 5px 5px 5px lightgreen inset;
2.3、案例3 - 偏移量为负值
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 偏移量为负值 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
box-shadow: -5px -5px 5px lightgreen;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 横向偏移量设置为正值时表示阴影相对盒子向右偏移,设置为负值时表示阴影相对盒子向左偏移。
- 纵向偏移量设置为正值时表示阴影相对盒子向下偏移,设置为负值时表示阴影相对盒子向上偏移。
2.4、案例4 - 模糊范围
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 模糊范围 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
box-shadow: 0 0 10px lightgreen;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 模糊范围为一个可选值。
- 模糊范围值越大,阴影模糊范围越大,颜色越浅。
- 不设置模糊范围或者设置为0时,阴影的边缘没有模糊效果。
2.5、案例5 - 扩展范围
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 扩展范围 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
box-shadow: 0 0 0 10px lightgreen;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 扩展范围为一个可选值。
- 扩展范围值越大,阴影尺寸越大,扩展范围值越小,阴影尺寸越小。
2.6、案例6 - 阴影颜色
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 阴影颜色 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
box-shadow: 0 0 10px 10px;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 阴影颜色为一个可选值,默认值是黑色。
2.7、案例7 - 多重阴影
下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 多重阴影 </title>
<style type="text/css">
* {margin: 0; border: 0; padding: 0;}
.d {
height: 100px;
width: 250px;
margin: 20px auto;
background-color: lightsalmon;
box-shadow: 5px 5px 5px lightgreen, inset 5px 5px 5px lightblue;
}
</style>
</head>
<body>
<div class="d"></div>
</body>
</html>
页面浏览效果:
说明:
- 用
,
将多组box-shadow
属性值隔开,可以设置多重阴影效果。