第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目

人可能会疑惑，我为什么专门用一节内容来说边框和圆角。其实，不为别的，只为它们在开发中，在Web系统中，在手机页面中，太常用了。有边框的页面，让人耳目一新，一目了然；有圆角的内容，让人赏心悦目，心旷神怡。说的有点夸张了，就这么着吧。

边框(border)一般为长方形形状，有上下左右四条边，CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法，可给任何元素制作 "圆角"效果。

11.1 边框逼格

在CSS中，你可以通过border和其延伸的，如border-style，来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似，换成对应的单词即可。

边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种，不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。

/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四条边框可个性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*单条边框设置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border统一设置四条边框<br/>
    顺序为：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四条边框一起设置，风格可不同<br/>
    顺序为:上、右、下、左。<br/>
    1. 只有一个值(如：border-width:2px)：表示4条边框全部一样；<br/>
    2. 有两个值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三个值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四个值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    单独一天边框进行设置<br/>
    border-top：顶部宽度、样式、颜色，一起设置<br/>
    border-top-width:上边框宽度；<br/>
    border-top-style:上边框样式；<br/>
    border-top-color:上边框颜色。
    <br/>
</div>
</body>
</html>

输出结果

11.2 圆角风格

使用CSS的border-radius 属性，你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角，顺序为左上、右上、右下和左下。如果要特定指定某个角的话，用border-top-left-radius等方式即可。

在样式表ys2.css文中的内容

/*4个角统一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*单独指定一个角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<br/><br/>
<div class="four-radius">
    统一设置4个圆角<br/>
    一个值： 四个圆角值相同;<br/>
    两个值: 左上角与右下角，右上角与左下角;<br/>
    三个值: 左上角, 右上角和左下角，右下角;<br/>
    四个值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    单独指定某个角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

输出结果

11.3 圆角边框

不要重复造轮子，所以好多程序员一遇到问题，就喜欢搜索，我也是，哈哈哈~。CSS有指定边框的属性，也有圆角的属性，将其放在一起，是不是就可以实现圆角边框?答案毋庸置疑，答案是肯定的。

在样式表ys2.css文件中的内容

/*圆角边框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<div class="corners">
    边框属性和圆角属性，组合成圆角边框
</div>

输出结果

好了，有关CSS的圆角边框内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

网页设计中经常用到css来设计各种边框样式以及颜色等，有时候需要一个div只显示一个边框，那么你可能会用到下面的一些方法。

一、CSS border-width 属性

border-width是实现显示边框的重要属性。用法如下：

border-width:top right bottom left

参数说明：

top：上边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

right：右边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

bottom：下边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

left：左边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。

其中像素如：10px 20px等

内置样式有：

thin：定义细的边框；

medium:默认值，定义中等边框；

thick：定义粗的边框；

inherit：继承父元素的边框宽度。

二、CSS border-style 属性

border-style是用来设置边框线样式的，语法如下：

border-style:样式;

其中可设置的样式有：

none 定义无边框。

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted 定义点状边框。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线。双线的宽度等于 border-width 的值。

groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

inset 定义 3D inset 边框。其效果取决于 border-color 的值。

outset 定义 3D outset 边框。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承边框样式。

三、实例应用

只要定义边框不为0，即可显示边框（但是需要定义边框线样式），如果想要只显示下边框就相当于把top、right、left设置为0px；下边框不为0即可。

实例如下：

<html>

<head>

</head>

<body>

<style>

.show{ border-width: 0 0 1px 0; border-style: solid; border-color: black; }

</style>

<div class='show'>只显示下边框</div>

</body>

</html>

显示如下：

如果想要只显示右边框只需要改border-width属性为 0 1px 0 0即可。

在线咨询

上一篇：http协议详解
下一篇：如何通过 Python 打造一款简易版 AlphaGo?

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目

11.1 边框逼格

11.2 圆角风格

11.3 圆角边框

您的项目需求