CSS边框

最新推荐文章于 2025-05-22 09:48:36 发布

Myzoneliver

最新推荐文章于 2025-05-22 09:48:36 发布

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端基础

本文链接：https://blog.youkuaiyun.com/qq_24732379/article/details/93137019

前端基础专栏收录该内容

8 篇文章

订阅专栏

博客介绍了CSS边框的相关知识。包括边框基本属性，如border - style常见值有实线、虚线、点状线，且该属性必须设置才有边框；还提到四个方向可独立设置及简写形式，以及border - radius。最后进行实战，如制作圆、半圆、1/4圆和椭圆。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

边框的基本属性

border-style常见的值有：solid实线，dashed虚线，dotted点状线。
在这里插入图片描述
注意：这三个值中border-style是必须的，如果只设置其他两个值不会显示边框。但只要设置了border-style，就会有边框，例如设置border: solid;chrome中width是0.6px，color等于字体颜色，默认是黑色。

TRBL与简写

四个方向可以独立设置，并具有简写形式

在这里插入图片描述

border-radius

在这里插入图片描述随便写个看看效果

div{
    width: 100px;
    height: 100px;
    border:  solid;
    border-radius: 30px / 10px;
}

在这里插入图片描述

实战

圆

div{
   width: 100px;
   height: 100px;
   border:  solid;
   border-radius: 50%;
}

在这里插入图片描述
半圆

div{
     width: 100px;
     height: 50px;
     border:  solid;
     border-radius: 50px 50px 0 0;
 }

在这里插入图片描述
1/4圆

div{
   width: 100px;
     height: 100px;
     border:  solid;
     border-radius: 100px 0 0 0;
 }

在这里插入图片描述
椭圆

div{
    width: 100px;
    height: 50px;
    border:  solid;
    border-radius: 100px / 50px;
}

在这里插入图片描述