HTML5+CSS边框圆角的设置方法与多背景图像/学习笔记

一、圆角的设置方法

在网页中可以使用圆角的效果来丰富页面的显示效果，属性：border-radius可以将矩形边框四角圆角化。

border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径战术3 垂直半径参数4；

<style>
	div{
		width: 300px;
		height: 300px;
		background: url("photo.png") center center no-repeat;
		margin:100px auto;
		border-radius: 10px 100px 60px 60px;
	}
</style>

如果border-radius的参数是边框宽度和高度的一般，则为圆形，也可以将参数设置成50%实现圆形效果。

二、多背景图像

在css3中可以通过background-image/background-repeat/background-position/background-size等属性提供多个属性值可以实现多重背景图像效果，各属性间用,逗号隔开。

background-image:url(路径),url(路径),url(路径);