边框样式(border-style)、边框圆角(border-radius)以及媒体查询(@media)

边框样式(border-style):

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

p {
	border-style: groove;
}

8种样式:
solid: 实线边框,经典边框。
double: 双线边框,含有两条线。
groove: 槽线边框,看起来就像页面中的一个槽。
outset: 外凸边框,看起来就像从页面凸出来一样。
dotted: 虚线(点线)边框。
dashed: 破折线边框。
inset: 内凹边框,看起来像页面凹进去一样。
ridge: 脊线边框,看起来像页面上一个凸起来的山脊。
边框样式(border-style)、边框圆角(border-radius)以及媒体查询(@media)_第1张图片

边框圆角(border-radius):

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

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

border-radius: 15px;

边框样式(border-style)、边框圆角(border-radius)以及媒体查询(@media)_第2张图片
2.分别指定四个角的弧度大小,可以用em指定半径大小。

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

边框样式(border-style)、边框圆角(border-radius)以及媒体查询(@media)_第3张图片
3.分别指定四个角的弧度大小,也可以用px指定半径大小。

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

边框样式(border-style)、边框圆角(border-radius)以及媒体查询(@media)_第4张图片

媒体查询(@media):

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



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


解释:
print表示当媒体类型为“print”类型时即打印机才会使用这个样式
  1. 添加在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 >元素来指定不同的样式表。

你可能感兴趣的:(css,html,css3)