Css属性：border边框，设置圆角，border-radius

最新推荐文章于 2024-07-10 16:05:14 发布

半浮名

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量2.2w

点赞数 3

分类专栏：笔记 html,css,js基础知识文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51813155/article/details/121213226

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

html,css,js基础知识

14 篇文章 1 订阅

订阅专栏

border边框

1.CSS border 属性

允许您指定元素边框的样式、宽度和颜色。
solid - 定义实线边框
dashed - 定义虚线边框

border 属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color

简写border: 2px solid red;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<style>

div{
    width: 300px;
    height: 300px;
    background-color: pink;
    border: 2px solid red;
}

</style>
<body>
    


<div>

</div>









</body>
</html>

没加之前border: 2px solid red;

在这里插入图片描述
加了之后：

2.CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：
可设置圆角的所有四个 border-*-radius 属性。
上下的左右边框
加这个：

border-radius: 50px 50px 50px 50px;

效果图：
在这里插入图片描述

制作圆形

可以设置：
border-radius: 80%;（）
上下的左右边框，圆角为80%，元素宽度的80%，设置为100%，靠近圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>



<style>

div{
    width: 30px;
    height: 30px;
    background-color: pink;
    border: 2px solid red;
   /* border-radius: 50px 50px 50px 50px;*/

   border-radius: 80%;
}

</style>
<body>
    


<div>

</div>









</body>
</html>

效果图：

在这里插入图片描述

半浮名

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Css属性：border边框，设置圆角，border-radius

border边框1.CSS border 属性1.CSS border 属性允许您指定元素边框的样式、宽度和颜色。solid - 定义实线边框dashed - 定义虚线边框border 属性是以下各个边框属性的简写属性：border-widthborder-style（必需）border-color<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫