55.0/CSS 的应用(详细版)

光明是人的信仰

已于 2023-12-21 11:33:30 修改

阅读量1.2k

点赞数 23

文章标签： css 前端 html

于 2023-12-21 11:32:33 首次发布

本文链接：https://blog.csdn.net/m0_65227896/article/details/135125787

版权

这篇博客详细介绍了CSS的边框样式设置，包括边框的粗细、颜色及复合设置，同时还深入探讨了模块的边距和内边距。在层的应用部分，讲解了如何建立、浮动、定位层，以及设置溢出和鼠标指针效果，并提供了一个给图片签名的小实例，最后总结了盒子模型的重要概念。

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

55.4.5 设置层的溢出——overflow

55.4.6 设置鼠标指针——cursor

55.4.7 小实例——给图片签名

55.5 盒子模型

55.1.1 设计边框样式

border-style 属性可以用来设置边框的样式。其取值说明见下表

border-style 是一个符合属性，可以取一到四个值：

取一个值表示四条边框都取这个值；

取两个值表示上下边框取第一个值，左右边框使用第二个值，两个值中

间用空格隔开。

取三个值或四个值，四条边框按照上、右、下、左的顺序调用取值（取

三个值时第四条边框与对面的边框取同一个值，也就是左和右都取第二

个值）。取值之间也要以空格隔开

<html>
<head>
<title>边框样式</title>
<style type="text/css">
.p1{border-style: solid;}
.p2{border-style: dashed double;}
.p3{border-style: double solid dashed;}
.p4{border-style: solid dotted dashed double;}
</style>
</head>
<body>
 <p class="p1">这是第一个段落</p>
 <p class="p2">这是第二个段落</p>
 <p class="p3">这是第三个段落</p>
 <p class="p4">这是第四个段落</p>
</body>
</html>

在浏览器中打开网页，效果如下：

除了用 border-style 一起设置四条边框的边框样式外，还可以分别设置：

border-top-style 用来设置上边框样式
border-bottom-style 用来设置下边框样式
border-right-style 用来设置右边框样式
border-left-style 用来设置左边框样式



上例中的 border-style: solid dotted dashed double; 等同于：
border-top-style: solid;
border-bottom-style: dashed;
border-right-style: dotted;
border-left-style: double;

55.1.2 调整边框的粗细

调整边框的粗细使用 border-width 属性，其取值通常为数字。和上节中所

讲的一样，可以用 border-width 统一设置四条边框的粗细，也可以使用

border-top-width 、 border-bottom-width 、 border-right-width 、 border-left-width 分

别设置。

<html>
<head>
<title>边框粗细</title>
<style type="text/css">
.p1{border-style: solid;
 border-width: 1px;}
.p2{border-style: dashed double;
 border-top-width: 1px;
 border-right-width: 5px;
 border-bottom-width: 10px;
 border-left-width: 15px;}
</style>
</head>
<body>
 <p class="p1">这是第一个段落</p>
 <p class="p2">这是第二个段落</p>
</body>
</html>

在浏览器中打开网页，效果如下：

55.1.3 边框颜色

调整边框的颜色使用 border-color 属性，其取值为颜色的英文单词或者 RGB

值。同样，我们可以用 border-color 统一设置四条边框的颜色，也可以使用

border-top-color 、 border-bottom-color 、 border-right-color 、 border-left-color 分别

设置。

<html>
<head>
<title>边框颜色</title>
<style type="text/css">
.p1{border-color: red;
 border-width: 1px;
 border-style: solid;}
.p2{border-color: green blue yellow purple;
 border-width: 3px;
 border-style: solid;}
</style>
</head>
<body>
 <p class="p1">这是第一个段落</p>
 <p class="p2">这是第二个段落</p>
</body>
</html>

在浏览器中打开网页，效果如下：

55.1.4 复合设置边框

以上三节所讲的 border-width 、 border-style 和 border-type 也可以组合起来

利用 border 来设置，每个取值用空格隔开且可随意摆放顺序。如：

border: 1px red solid; 等同于
border: solid 1px red; 等同于
border-width: 1px;
border-style: solid;
border-color: red;



当然，你也可以上、下、左、右分别设置边框的样式



<html>
<head>
&

最低0.47元/天解锁文章

光明是人的信仰

关注

23
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
55.0/CSS 的应用(详细版)

55.1.1设计边框样式属性可以用来设置边框的样式。其取值说明见下表是一个符合属性，可以取一到四个值：取一个值表示四条边框都取这个值；取两个值表示上下边框取第一个值，左右边框使用第二个值，两个值中间用空格隔开。取三个值或四个值，四条边框按照上、右、下、左的顺序调用取值（取三个值时第四条边框与对面的边框取同一个值，也就是左和右都取第二个值）。取值之间也要以空格隔开在浏览器中打开网页，效果如下：除了用55.1.2调整边框的粗细调整边框的粗细使用。
复制链接

扫一扫