局部边框的使用-CSS入门基础（012）

最新推荐文章于 2024-09-27 11:28:03 发布

虾米大王

最新推荐文章于 2024-09-27 11:28:03 发布

阅读量437

点赞数

分类专栏： CSS 文章标签： css css3 html html5 javascript

本文链接：https://blog.csdn.net/modern358/article/details/111397652

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们接着分享边框样式的使用。

我们都知道边框有上下左右，四条边，那么如果我们要对其中的某一条边设置，我该怎么办？

在css中，我们是可以分别对上下左右的边进行单独的样式设置的。

上边框border-top：

border-top-width:1px;border-top-style:solid;border-top-color:red;

简洁写法：

border-top: 1px solid red;

下边框border-bottom：

border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: blue;

简洁写法：

border-bottom: 1px solid blue;

左边框border-left：

border-left-width: 1px;border-left-style: solid;border-left-color: green;

简洁写法：

border-left: 1px solid green;

右边框border-right:

border-right-width: 1px;border-right-style: solid;border-right-color: orange;

简洁写法：

border-right: 1px solid orange;

以上内容，无论是边框的整体样式，还是局部样式，都是需要设置边框的三个属性的，即宽度、外观和颜色。

	border-top
border-left		border-right
	border-bottom

示例代码：

<html>  <head>    <title>局部边框样式</title>    <style type="text/css">      #d1      {        width:200px;        height:200px;        border-top: 1px solid red;        border-left: 1px solid green;        border-right: 1px solid blue;      }     </style>  </head>  <body>    <div id="d1"></div>  </body></html>

这里给大家一种特殊的小技巧，请看代码

<html>  <head>    <title>局部边框</title>    <style type="text/css">      #d2       {        width:200px;        height:200px;        border: 1px solid black;        border-bottom : 0px;      }    </style>  </head>  <body>    <div id="d2"></div>  </body></html>