边框属性和用法

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;
				}