边框属性及其用法

yxh_live

已于 2023-12-25 10:18:55 修改

阅读量396

点赞数 7

文章标签： css 前端开发语言

于 2023-12-25 08:58:30 首次发布

本文链接：https://blog.csdn.net/yxh_live/article/details/135190930

版权

本文详细介绍了CSS中的border属性，包括边框大小、样式（如solid、dashed、dotted和double）、单独设置top、left、bottom、right的样式、颜色和宽度，以及圆角（border-radius）和边框阴影（box-shadow）的概念和用法。最后提到了border-image用于使用图形作为边框。

摘要由CSDN通过智能技术生成

border——css的边框属性

borde : 大小 | 线的样式 | 颜色

线的样式

- none:没有边框,即忽略所有边框的宽度(默认值)

-·solid:边框为单实线 ·dashed:边框为虚线

·dotted:边框为点线

·double:边框为双实线

	.boss {
					width: 300px;
					height: 300px;
					margin: 0 auto ;
					border: 10px solid aqua;
				
				}

border-：top | left | bottom | right

border-加上这四个值可以单个设置大小，颜色和线样式。

	.boss {
					width: 300px;
					height: 300px;
					margin: 0 auto ;
				border-top: 10px solid red;
				border-left: 20px dashed red;
				border-bottom: 30px solid green;
				border-right: 40px solid red; 
				}

- border-top | left | bottom | right-width

可以单独设置宽度

- border-top | left | bottom | right-style

可以单独设置线的样式

		.boss {
					width: 300px;
					height: 300px;
					margin: 0 auto ;
			border-top-width: 10px;
			border-left-width: 20px;
			border-bottom-width: 30px;
			border-right-width: 40px;
			border-top-style: solid;
			border-left-style: dashed;
			border-bottom-style: dotted;
			border-right-style: double;  
				}

border-top | left | bottom | right-color

可以单独设置颜色

	.boss {
					width: 300px;
					height: 300px;
					margin: 0 auto ;
					border: 30px solid aqua;
			border-top-color: red;
			border-left-color: orange;
			border-bottom-color: pink;
			border-right-color: aqua;
				}

border-radius——圆角

两种方法：border-radius: 10px 20px 30px; | border-radius: 50%;
以上两种方法都可以设置圆角，百分比是全局设置，px方法是单个设置。

	.boss {
					width: 300px;
					height: 300px;
					margin: 0 auto ;
					border: 30px solid aqua;
			border-top-color: red;
			border-left-color: orange;
			border-bottom-color: pink;
			border-right-color: aqua;
			 border-radius: 10px 20px 30px;
				}

			.boss {
					width: 300px;
					height: 300px;
					margin: 0 auto ;
					border: 30px solid aqua;
			border-top-color: red;
			border-left-color: orange;
			border-bottom-color: pink;
			border-right-color: aqua;
			 /* border-radius: 10px 20px 30px; */
			 border-radius: 50%; 
				}

box-shadow——边框阴影

	.boss {
					width: 300px;
					height: 300px;
					margin: 100px auto ;
					border: 30px solid aqua;
					box-shadow: 10px 20px 30px 40px;
					/* box-shadow: 水平 垂直 大小 颜色; */
				}

border-image——图形边框

.boss {
					width: 300px;
					height: 300px;
					margin: 100px auto;
					border: 30px solid aqua;
					border-image: url("./手机8.webp") 50 50 round;
				}