border | web

# border

# border-radius

如分四个角，从左上角开始计数，以顺时针方向

border-radius原理图：

# box-shadow 盒阴影

/*语法*/ 
box-shadow: h-shadow v-shadow blur spread color inset;

为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上称写成-webkit-box-shadow的形式。Firefox则需要写成-moz-box-shadow的形式,欧朋 -o-box-shadow IE>9 -ms-box-shadow

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

水平-垂直-模糊-阴影面积-颜色-内外

  <div  
	  style="box-shadow: 10px 10px red;
			border:1px solid black;
			width:100px;
			height:100px"
  >
  </div>

  <div  
	  style="box-shadow: -60px 10px red;
			border:1px solid black;
			width:100px;
			height:100px"
  >
  </div>

<div  
  style="box-shadow: 10px 10px red inset;
		border:1px solid black;
		width:100px;
		height:100px"
>
</div>

<div  
  style="box-shadow: -10px -10px red inset;
		border:1px solid black;
		width:100px;
		height:100px"
>
</div>

<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
   	   0px -10px 10px #000,  /*上边阴影*/ 
   	   10px 0px 10px green,  /*右边阴影*/ 
   	   0px 10px 10px blue;/*下边阴影*/
   	    border:1px solid black;
   	   width:100px;height:100px;
   	   "  >
</div>

# 四周都有阴影设置

.shadow{ 
   -webkit-box-shadow: orange 0px 0px 10px; 
   -moz-box-shadow:orange 0px 0px 10px; 
   box-shadow: orange 0px 0px 10px; 
   background: #EEFF99; 
   width: 100px;
   height: 100px;
}

# border-image

 border-image: source slice width outset repeat|initial|inherit;

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

# border-image-source

border-image-source: url(border.png);

# border-image-slice

图片边框向内偏移的距离。格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。该距离接受数值，百分数。 默认数值的单位是px,但是不能在数值后面加px ，否则这句css将不被浏览器解析。

border-image-slice: 10;   /*距离上下左右均为10px;*/
border-image-slice: 10 30;   /*距离上下10px,左右30px;*/
border-image-slice: 10 30 20;   /*距离上10px,下20px,左右30px;*/
border-image-slice: 10 30 20 40;   /*距离上10px,右30px,下20px,左40px;*/

# border-image-width

图片边框的宽度。只接受数值，且不能加单位。

border-image-width: number|%|auto;

值	说明
number	表示相应的border-width 的倍数
%	边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积
auto	如果指定了，宽度是相应的image slice的内在宽度或高度

# border-image-repeat

图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。而无论怎样铺，四个角，只会被相应拉伸。

# border-image-outset

边框图像区域超出边框的量。格式：border-image-outset : length | number。length是数值加单位“px”，number指的是相对于边框宽度增加的倍数。

初始值	-
border-image-source:	none
border-image-slice:	100%
border-image-width:	1
border-image-outset:	0
border-image-repeat:	stretch

<div style="width:300px;
			height:300px;
			margin:0 auto;
			border:50px solid ;
			border-image: url(/img/apicilent.png) 200 round;"></div>

合写border-image

border-image-width在复合写法中应该位于 slice属性和repeat属性中间用“/”间隔

border-image:url(border.png) 27 / 6rem / repeat;

border-image-outset在复合写法中应该位于 border-image-width 后面，用“/”间隔 /向外延伸1.5rem再贴图/

border-image:url(border.png) 27 / 6rem / 1.5rem /repeat;

连接 (opens new window)

← filter background →