CSS3之边框

CSS3 圆角边框 border-radius

1 2 3 4个值

		border-radius: 20px 60px 100px 140px; /*从左上开始，顺时针赋值*/

        border-radius: 20px 60px 100px;   /*如果当前角没有值，取对角的值  */

         border-radius: 20px 60px;

		 border-radius: 60px;         /* 四个角的说半径都相同是简写*/

水平 垂直（X轴 Y轴）

		border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /*水平半径/垂直半径*/

	    border-radius: 60px/120px;		/*复合写法*/

单个属性

		border-top-left-radius: 10px 90px;
		border-top-right-radius: 60px 10px;
		border-bottom-left-radius: 60px 10px;
		border-bottom-right-radius: 60px 10px;

		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;

边框阴影 box-shadow

box-shadow 属性向框添加一个或多个阴影
box-shadow: h-shadow v-shadow blur spread color inset;
水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 外(outset)/内阴影(inset)

		box-shadow: 15px 21px 2px 10px #666;

		box-shadow: 15px 21px 10px 10px #666;

边框图片 box-image

border-image-source:url(图片的位置); 设置图片边框的地址
border-image-slice:33.3333% fill;裁切图片 fill是铺满可以不写
border-image-width:;设置宽度
border-image-repeat:stretch/repeat/round; 边框图片的平铺
border-image-outset:20px;边框图像区域超出边框的量

stretch拉伸
repeat/round平铺

旁边有残缺
无残缺