CSS的核心属性（二）

Summer_YJ

于 2022-07-09 17:49:11 发布

阅读量70

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Summer_YJ/article/details/125696586

版权

本文详细介绍了CSS中的边框属性，包括边框宽度、样式和颜色，并讲解了边框的简写方式及如何改变各个边框的属性。此外，还探讨了盒模型的概念、分类以及如何形成怪异盒模型。同时，文章涵盖了字体大小、样式、行高、颜色、文本修饰、首行缩进、中文汉字间距和背景属性的使用方法，是CSS初学者的实用指南。

摘要由CSDN通过智能技术生成

边框属性的使用
1.组成边框的样式
- 边框宽度 border-width
- 边框样式 border-style
- 边框颜色 border-color
2.边框属性的属性值
- 边框宽度:数值加单位(px)
- 边框样式:solid(实线) dashed(虚线) dotted(点线) double(双实线)
- 边框颜色
- 英文单词:yellow、green、red...
- 十六进制:
- 以#开头,后面接六个字符(0~9a~f) #1234ab
- 当后面的六个字符相等的时候可以简写成3个
- #778899(#789) #000 #fff #ccc
3.边框属性的简写方式
- 属性:border
- 属性值:border-width border-style border-color
4.通过需求拓展边框其他属性的用法
- 改变顶部边框的颜色:border-top-color
- 改变右侧所有的样式:border-right
- 清除标签的自带边框:border:none/0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /* border-width: 2px;
            border-style: double;
            border-color: pink */
            border: 5px solid #000;
            border-top-color: green;
            border-right: 2px dashed red
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图：

利用边框属性绘制三角形：（经常被用于前端面试题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            background-color: pink
        }
        div{
            width: 0;
            height: 0;
            border: 100px solid #000;
            border-top-color: transparent;/* 透明 */
            border-right-color: red;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图如下：