CSS边框属性总结

刚刚

2021 年 03 月 10 日

857 次浏览

暂无评论

1801字数

默认分类

什么是边框
CSS边框属性
border 属性的几种书写方式
边框倒角（border-radius）

1. 什么是边框

百度百科边框的定义：https://baike.baidu.com/item/css边框

CSS盒模型中的边框所在位置：位于外边距和内边距的中间

在学校初次学习边框时，老师是这样讲的：边框是环绕在标签宽度和高度周围的线条

2. CSS边框属性

基本属性（border）：边框宽度、边框样式、边框颜色

边框倒角（border-radius）

边框阴影（box-shadow）

轮廓属性（outline）

3. border 属性的几种书写方式

最简洁，也是最常用的方式
```
    border: width style color;
```

简写方式的属性值顺序可以打乱
边框样式没有默认值，不能省略，否则看不到边框
宽度和颜色都有默认值可以省略，宽度默认为medium（3px），颜色默认为黑色

给某一个方向的边框设置宽度、样式、颜色

    border-方向: width style color;
/** 实线 **/
border-top: 1px solid red;
/** 虚线 **/
border-right: 2px dashed green;
/** 点状边框 **/
border-bottom: 3px dotted blue;
/** 去除左边框 **/
border-left: none;

给四个方向的边框设置不同的属性值

    border-属性:上 右 下 左;
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;
    border-方向-属性: 属性值;
border-top-width: 5px;
border-right-style: solid;

给某一个边框单独设置某个属性

4. 边框倒角（border-radius）

作用：设定盒子模型四个角的圆弧角度
```
    border-radius: 左上 右上 右下 左下;
```
四个值：左上角右上角右下角左下角

两个值：x轴 y轴
一个值：四个角的圆弧角度

1.% 设定x,y轴长度都是宽高的50%
2.px 一个具体数值,表示同时设定x轴,y轴的半径
3.x轴/y轴第一个属性值表示x轴半径数值的设定，第一个属性值表示y轴半径数值的设定

属性值说明
画图形
标准圆：正方形边框x轴、y轴倒角都取50% 时边框变为圆

    <style>
    div {
        width: 150px;
        height: 150px;
        border: 2px solid red;
        border-radius: 50%;
    }
</style>
<div></div>

椭圆形: 宽是高的两倍，边框倒角取50% 时边框变为椭圆

    <style>
    div {
        width: 300px;
        height: 150px;
        border: 2px solid red;
        border-radius: 50%;
    }
</style>
<div></div>

CSS边框属性总结