CSS 边框属性总结

很酷的站长

发布于 2023-02-16 09:11:05

2.4K00

代码可运行

文章被收录于专栏：站长的编程笔记站长的编程笔记

运行总次数：0

代码可运行

1. 什么是边框

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

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

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

2. CSS边框属性

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

边框倒角（border-radius）

边框阴影（box-shadow）

轮廓属性（outline）

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

a. 最简洁，也是最常用的方式

border: width style color;

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

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

border-方向: width style color;

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

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

border-属性:上 右 下 左;

border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左;

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

border-方向-属性: 属性值;

border-top-width: 5px;
border-right-style: solid;

4. 边框倒角（border-radius）

a. 作用：设定盒子模型四个角的圆弧角度

border-radius: 左上 右上 右下 左下;

b. 属性值说明

四个值：左上角右上角右下角左下角两个值：x轴 y轴一个值：四个角的圆弧角度

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

c. 画图形

标准圆：正方形边框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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度