css基础--边框

最新推荐文章于 2024-05-05 20:17:09 发布

夺笋123

最新推荐文章于 2024-05-05 20:17:09 发布

阅读量1.7k

点赞数 4

分类专栏： # css基础文章标签： html css3

本文链接：https://blog.csdn.net/m0_54510474/article/details/124881316

版权

css基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

边框简介

HTML中的任何块元素和行内元素几乎都可以设置边框属性，比如div元素、img元素、table元素等。每一个页面元素的边框都可以从3个方面描述：宽度、样式、颜色，这3个方面决定了边框所显示出来的外观。在CSS中可以通过下面3个属性来设定边框的3个方面

属性名	描述
border-width	宽度
border-style	样式
border-color	颜色

边框样式

边框样式，即风格，有下面的可选值分别代表不同的边框样式

可选值	描述
none	无样式
hidden	隐藏式
dotted	点线式
dashed	破折线式
solid	实线
dashed	虚线
double	双线
inset	3D内凹式边框，效果取决于border-color的值
outset	3D外凸式边框，效果取决于border-color的值
ridge	3D脊线式边框，效果取决于border-color的值
groove	3D槽线式边框，效果取决于border-color的值

一个小demo


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html5 demo</title>
    <style>
    	p {
    		width: 30%;
    	}
    	p.goal{
    		border-color: #43b113;
    		border-width: 6px;
    	}
    </style>

</head>
<body>
	<p style="border-style: none;">none</p>
	<p style="border-style: hidden;">隐藏式边框</p>
	<p style="border-style: dotted;">点线式边框</p>
	<p style="border-style: dashed;">破折线式</p>
	<p style="border-style: double;">双线式</p>
	<p style="border-style: solid;">实线式</p>
	<p style="border-style: inset;" class="goal">3D内凹式边框</p>
	<p style="border-style: outset;" class="goal">3D外凸式边框</p>
	<p style="border-style: ridge;" class="goal">3D脊线式边框</p>
	<p style="border-style: groove;" class="goal">3D槽线式边框</p>

</body>
</html>

Chrome浏览器运行结果
在这里插入图片描述

边框宽度

边框宽度用来增强边框的效果，border-width有下面属性值可选

可选值	描述
medium	中等宽度，默认
thin	细
thick	粗
length	自定义宽度

一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html5 demo</title>
    <style>
    	p{
    		width: 30%;
    		border-style: solid;
    	}
    </style>
</head>
<body>
	<p style="border-width: medium;">这是一个段落</p>
	<p style="border-width: thin;">这是一个段落</p>
	<p style="border-width: thick;">这是一个段落</p>
	<p style="border-width: 5px 10px;">这是一个段落</p>

</body>
</html>

Chrome运行结果
在这里插入图片描述

关于自定义宽度

border-width可以一次设置多个值，分别对应边框的四个边

设置一个值时，适用于四个边

border-width:5px;

设置两个值时，分别对应上下两个边

border-width:5px 6px;

设置四个值时，分别对应上右下左四个边

border-width:5px 6px 7px 8px;

边框颜色

border-color用于设置边框颜色，颜色值可以通过多种方式获取，如下所示

	描述	举例
name	颜色名	“red”
HEX	十六进制值	“#ff0000”
RGB	RGB 值	“rgb(255,255,0)”
HSL	HSL 值	“hsl(0, 50%, 50%)”

同边框宽度一样，自定义颜色时，可以一次设置多个颜色值用于分别表示边框的四个边的颜色

其他边框设置

圆角边框

CSS3之前要实现圆角边框，需要花费很大精力，但是CSS3出来之后，可以通过border-radius直接设置圆角效果

border-radius:水平半径/垂直半径（单位：px）;

border-radius:length;

border-radius:*length;

border-radius属性包含两个参数值，两者使用"/"分开

当只给出一个参数值时，默认两参数值相等，此时圆角为一个 $\frac{1}{4}圆$
当给出多个参数值时，会依次给top-left、top-right、bottom-right、bottom-left等四个角赋予半径

一个小demo

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html5 demo</title>
    <style>
    	div{
    		border: 15px solid #cf8232;
    		height: 100px;
    		width: 20%;
    		margin: 5px 10px;
    	}
    	.div1{
    		border-radius: 10px 30px 50px 70px;
    	}
    	.div2{
    		border-radius: 10px 50px 70px;  		
    	}
    	.div3{
    		border-radius: 10px 50px;
    	}


    </style>

</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>

</body>
</html>

Chrome浏览器运行结果
在这里插入图片描述

边框设置的简写

我们知道边框有三个方面需要，有时候一个一个设置十分繁琐，实际上有一种偷懒的方法

border:width style color;

边框局部样式

每个边框有上下左右四个边框，css中可分别针对这四个边框中的一个设置样式

针对边框	语法格式
上边框	border-top-width:20px; border-top-color:red; border-top-style:solid;
下边框	border-bottom-width:20px; border-bottom-color:red; border-bottom-style:solid;
左边框	border-left-width:20px; border-left-color:red; border-left-style:solid;
右边框	border-right-width:20px; border-right-color:red; border-right-style:solid;