李涛自留地
回到顶部
首页 > 前端 > border属性值有哪些？css的border属性怎么写

border属性值有哪些？css的border属性怎么写

文章目录

border边框是我们在前端设计页面中必不可少的一个Css样式之一，使用border边框可以让我们的网站页面看上去更加的立体化和结构分明，那么在Css中border有哪些属性？border又有哪些样式效果呢？下面将介绍border属性值有哪些？border样式值的各种作用及效果。

一、border是什么？

border在Css中主要是起到设置页面某一个区域四条边框的样式，主要可以设置边框的颜色、边框的宽度、以及以什么样的边框样式。

二、border边框包含哪些属性值？

1、border简写语法：

border是边框样式的简写模式，主要有以下三个值：

.div{border:5px soild #000;}

以上列举的border的三个值依次是：四条边框的宽度 边框的样式 边框的颜色

2、border边框包含有哪些属性值：

（1）、border的四条边属性

border-top:顶部边框；

border-right:右边边框；

border-bottom:底部边框;

border-left:左边边框；

以上这些边框属性在我们需要单独设置某一个边的边框时单独使用，使用方法和以上border的用法一样。

（2）、border-style属性

border-style属性是border简写语法中的第二个属性值，这个值可以决定边框的样式，border-style内置的样式有以下样式：

border-style属性 border-style样式 说明
none 取消边框
dotted 定义一个圆点线边框
dashed 定义一个虚线边框
solid 定义实线边框
double 定义两个边框。 两个边框的宽度和 border-width 的值相同 边框宽度太小效果不明显
groove 定义3D沟槽边框。效果取决于边框的颜色值 同上
ridge 定义3D脊边框。效果取决于边框的颜色值 同上
inset 定义一个3D的嵌入边框。效果取决于边框的颜色值 同上
outset 定义一个3D突出边框。 效果取决于边框的颜色值 同上

在border-style中使用比较多的就是solid实线和dashed虚线以及dotted圆点边框。

（3）、border-color属性

边框的样色属性，我们可以设置成rgba()或者是十六进制颜色再或者是英文标识。

3、border的其他属性

当然我们在使用border属性的时候，如果我们想让4条边显示出不一样的颜色的时候，我们还可以在border简写完之后的样式下单独设置这些border-top-color、border-right-color、border-bottom-color、border-left-color的样色，用来替换上面border的颜色值。

三、border边框一个简单Demo

<!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>border测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background-color: #f8f8f8;
            font-size: 14px;
        }

        .container {
            width: 640px;
            margin: 0 auto;
        }

        .header {
            height: 90px;
            background-color: #fff;
            margin-bottom: 15px;
            border-left: 5px dotted blue;
            border-bottom: 5px dashed red;
        }

        .main {
            height: 300px;
            border: 5px double #999;
            background-color: #fff;
            border-top-color: red;
        }
    </style>
</head>

<body class="container">
    <header class="header">头部区域</header>
    <main class="main">主体部分</main>
    <footer>
        底部部分
    </footer>
</body>

</html>
border属性值有哪些？css的border属性怎么写

学好Css中的border属性对于一个网站页面的设计效果的提升还是很重要的，后续将记载更多关于Css样式的文章。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。