【CSS3学习笔记】9：CSS中的边框

最新推荐文章于 2022-05-20 14:40:45 发布

大桔骑士v

最新推荐文章于 2022-05-20 14:40:45 发布

阅读量825

点赞数

分类专栏： CSS 文章标签： css html5 border

本文链接：https://blog.csdn.net/SHU15121856/article/details/75208294

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本节学习CSS中的边框。

声明边框主要有三个属性：
border-style:边框样式，border-width边框宽度，border-color边框颜色。其中border-style是必须写的。

border-style的值：
none去掉边框，dashed破折线，dotted圆点线，double双线，groove槽线，inset内嵌，outset外凸，ridge脊线，solid实线。

border总简写格式：
border: 长度值 style类型颜色;

对四条边中的某一条单独设置：
①border-top-width，border-top-color，border-top-style
②border-bottom-width，border-bottom-color，border-bottom-style
③border-left-width，border-left-color，border-left-style
④border-right-width，border-right-color，border-right-style

border某条边简写：
border-top，border-bottom，border-right，border-left参数表和border一致。

圆角边框：
border-radius设置四个边角，可以用一个值表示四个边角一样，也可以设置四个值(上右下左)。

只对一个角设置：
border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius

*测试代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>CSS边框</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div>我是HTML5</div>
    <br>
    <b>我是加粗的HTML5</b>
</body>
</html>

@charset "utf-8";
div{
    width: 200px;
    height: 200px;
    /*border-style: solid;*/
    /*border-width: thin;
    border-width: thick;
    border-width: medium;*/
    border-width: 6px;
    border-color: red;

    /*border-style: dashed;*/
    /*border-style: dotted;*/
    /*border-style: double;*/
    /*border-style: groove;*/
    /*border-style: inset;*/
    /*border-style: outset;*/
    border-style: ridge;

    /*border: 20px groove green;*/

    border-radius: 10px 20px 30px 40px;
}

b{
    border-top-width: 20px;
    border-top-color: green;
    border-top-style: groove;

    border-bottom: 50px groove blue;
    border-top-right-radius: 30px;
}