CSS边框

最新推荐文章于 2024-04-25 18:36:27 发布

努力学习javaee的小白选手

最新推荐文章于 2024-04-25 18:36:27 发布

阅读量1w

点赞数 4

分类专栏： javaee 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_50555031/article/details/124892310

版权

javaee 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、边框简介

HTML中的任何块元素和行内元素几乎都可以设置边框属性，比如div元素、img元素、table元素等。每一个页面元素的边框都可以从3个方面描述：宽度、样式、颜色，这3个方面决定了边框所显示出来的外观。在CSS中可以通过下面3个属性来设定边框的3个方面：

border-style：设置边框的样式，例如实线、虚线等
border-width：设置边框的宽度（厚度）
border-color：设置边框的颜色
border：上面三个边框属性的缩写

二、border-style

border-style 属性用来设置元素中所有边框的样式，或者单独为某个边框设置样式，其语法格式如下：

border-style: border-top-style border-right-style border-bottom-style border-left-style;

border-style 属性的可选值如下：

值	描述
none	无边框
hidden	隐藏边框，与 "none" 类似
dotted	定义点状虚线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双实线边框，双实线边框的宽度等于 border-width 的值
groove	定义 3D 凹槽边框，其效果取决于 border-color 的值
ridge	定义 3D 垄状边框，其效果取决于 border-color 的值
inset	定义 3D 嵌入边框，其效果取决于 border-color 的值
outset	定义 3D 突出边框，其效果取决于 border-color 的值
inherit	从父元素继承边框样式

三、border-width

border-width 属性用来设置元素中所有边框的宽度，或者单独为某个边框设置宽度，其语法格式如下：

border-width: border-top-width border-right-width border-bottom-width border-left-width;

border-width 属性的可选值如下：

值	描述
thin	定义较细的边框
medium	默认值，定义中等宽度的边框
thick	定义较粗的边框
length	使用数值加单位的形式设置具体的边框宽度，例如 2px
inherit	从父元素继承边框的宽度

四、border-color

border-color 属性用来设置元素中所有边框的颜色，或者单独为某个边框设置颜色，其语法格式如下：

border-color: border-top-color border-right-color border-bottom-color border-left-color;

border-color 属性的可选值如下：

值	描述
color_name	使用颜色名称来设置边框的颜色，例如 red
hex_number	使用颜色的十六进制值来设置边框的颜色，例如 #ff0000
rgb_number	使用 rgb() 函数设置边框的颜色，例如 rgb(255,0,0)
transparent	默认值，设置边框颜色为透明
inherit	从父元素继承边框的颜色

五、border

border 属性是上面介绍的 border-width、border-style、border-color 三种属性的简写，使用 border 属性可以同时定义上述三个属性，语法格式如下：

border: border-width border-style border-color;

其中 border-width 用来设置边框的宽度；border-style 用来设置边框的样式；border-color 用来设置边框的颜色。

实例：

<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            width: 100px;
            float: left;
            margin: 5px;
        }
        .one {
            border: 2px solid green;
        }
        .two {
            border: 5px double red;
        }
        .three {
            border: 3px dotted blue;
        }
    </style>
</head>
<body>
    <p class="one">one</p>
    <p class="two">two</p>
    <p class="three">three</p>
</body>
</html>

运行结果：