Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说边框样式（border-style）、边框圆角（border-radius）以及媒体查询（@media）[通俗易懂],希望能够帮助你!!!。

边框样式（border-style）:

border-style属性可以控制边框的视觉样式，包含8种可用边框样式。
使用方法：

p {
	border-style: groove;
}

8种样式：
solid： 实线边框，经典边框。
double： 双线边框，含有两条线。
groove： 槽线边框，看起来就像页面中的一个槽。
outset： 外凸边框，看起来就像从页面凸出来一样。
dotted： 虚线（点线）边框。
dashed： 破折线边框。
inset： 内凹边框，看起来像页面凹进去一样。
ridge： 脊线边框，看起来像页面上一个凸起来的山脊。

边框圆角（border-radius）:

一般设置的边框默认样式都是90°的直角边框，利用border-radius属性可以设置边框四角的弧度。

使用方法：
1.用一个数字指定四个角的弧度大小。

border-radius: 15px;

2.分别指定四个角的弧度大小，可以用em指定半径大小。

border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-right-radius: 3em;
border-bottom-left-radius: 3em;

3.分别指定四个角的弧度大小，也可以用px指定半径大小。

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 15px;

媒体查询（@media）:

1. 添加在link中的媒体查询

<link href="xxx.css" rel="stylesheet" media="screen and (max-device-width: 480px)">
<link href="xxx.css" rel="stylesheet" media="screen and (max-device-width: 480px) and (orientation: portrait)">

解释：
screen表示指定了必须是有屏幕的设备；
max-device-width: 480px表示屏幕宽度不超过480像素；
orientation: portrait表示屏幕纵向；
orientation: landscape表示屏幕横向；
media="screen and (max-device-width: 480px)表示只有是是屏幕设备并且屏幕宽度不超过480像素的设备才能应用这一个样式。

<link href="xxx.css" rel="stylesheet" media="print">

解释：
print表示当媒体类型为“print”类型时即打印机才会使用这个样式

2. 添加在css样式表中的媒体查询

@media screen and (min-device-width: 481px){ //当设备带有屏幕且屏幕宽度大于480px就会使用这个规则
	#apple {
		margin-right: 250px;
	}
}
@media print { //当媒体设备是“print”类型的时候就会使用这个规则
	body {
		font-family: Times, "Times New Roman", serif;
	}
}
p.specials { //因为这个规则没有使用@media媒体查询，所以全部的specials类的p标签都会使用这个规则
	color: red;
}

link中添加@media和css样式表中添加@media的区别：
两个的作用都是相同的，区别在于如果把所有的规则都放在一个文件中，再使用@media规则将它们分开，你的css会变得非常庞大。
通过为不同的媒体类型使用不同的< link >元素，就能按照媒体类型在不同文件中组织css。所以，当css文件非常庞大，就使用< link >元素来指定不同的样式表。