边框，圆角，投影

边框

border设置边框样式

语法：
border:第一个参数表示边框粗细 第二个参数表示边框的风格 第三个参数表示边框的颜色
border:1px solid #ddd;
如果只想设置某一边的边框样式可以使用如下：
border-left,border-top,border-right,border-bottom

透明边框，如果我们想设置一个不可见的边框，想让边框变为透明的：
代码可以设置如下：

border:10px solid transparent;

不显示边框，可以设置border的style为none
代码如下：

border-style:none;
或者：
border:0 none;

border-style的可能值包括：
(1)none定义无边框
(2)hidden与none相同，不过应用于表时除外，对于表，hidden 用于解决边框冲突。
(3)dotted定义点状边框。在大多数浏览器中呈现为实线。
(4)dashed定义虚线。在大多数浏览器中呈现为实线。
(5)solid定义实线。
(6)double定义双线。双线的宽度等于 border-width 的值。
(7)groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
(8)ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
(9)inset定义 3D inset 边框。其效果取决于 border-color 的值。
(10)outset定义 3D outset 边框。其效果取决于 border-color 的值。

效果：

border: 10px dotted red;

border: 10px dotted red;

border: 10px double red;

border: 10px groove red;

border: 10px ridge red;

border: 10px inset red;

border: 10px outset red;

border-radius用来设置圆角

用来设置圆角，语法：
border-radius:0px 20px 30px 10px;
参数顺序：左上角，右上角，右下角，左下角

border-radius的值可以是具体值也可以是百分比

如果只写一个参数，表示四个角都是同一个弧度。如border-radius:10px，表示四个角都是10px.
如果只写两个参数，表示左上角和右下角一样，右上角和左下角一样。如：border-radius:10px 20px;

border-image使用图片来创建边框

使用border-image可以使用图片来创建边框。

border-image的属性如下：
(1)border-image-source用在边框的图片路径(必填)

(2)border-image-slice图片边框向内偏移
图片边框向内偏移的距离。
格式：border-image-slice：top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 如下图所示：

该距离接受数值，百分数。默认数值的单位是px,但是不能在数值后面加px，否则这句css将不被浏览器解析。
用法和margin，padding类似。这里以数值举例，百分数同理。
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;/
四条线将背景图分割成了9个部分，其中1,2,3,4,6,7,8,9这八个区域将会被切割，作为图片边框，如果除了设置数值或者百分数，还加了一个“fill”，那么区域5就会作为背景填充进元素content，如：
border-image-slice: 25 11 fill;
注意：slice不接受负值；如果slice切割的左右距离之和大于背景图的宽，则上下边框不显示。如果slice切割的上下距离之和大于背景图的高，则左右边框不显示。

该属性值指定浏览器从某处裁剪源图片以获得边框的某部分。图片被分为9部分-包括4个边角，4条边，还有中心块。

（蓝色线围起来的区域为裁剪区域）
该属性最多接受4个不带单位的正数或者百分比，包括一个可选的fill关键字。属性的初始值为100%。
border-image为栅格图片时，不带单位的数字指定了裁剪的像素值；为SVG时，这些数字表示按坐标裁剪。例如，一张大小为100px 100px的栅格图片，任意一边的10%都是10px.下面的SVG usage notes一节涉及SVG情况下百分比如何工作。
这串数值规定从源图片的上部，右部，下部，左部开始测量裁剪。如果缺少一个值，默认取对边的值-如缺少左部的值，同时右部的值为10px，左部的值会取10px.
默认舍弃源图片的中心块。一旦使用了fill关键字，源图片的中心块将作为该元素的背景。

(3)border-image-width图片边框的宽度
该属性指定了边框图片的宽度。属性值可以是百分比，不带单位的正数，或者是关键字auto.

该属性值规定了元素上部，右部，下部，左部的边框图片宽度。若缺少一个值，则取对边的值。
对该属性而言，百分比数值与边框图片区域的大小有关，而无单位数值将与border-width相乘。
属性的初始值为1，所以若该属性值未设置，但该元素设置了border或border-width属性,边框图片会依照这两个属性值进行绘制。
auto关键字告诉浏览器，可自动选择border-image-slice(如果可用的话)或border-width属性的值。

(4)border-image-outset边框图像区域超出边框的量
相当于把原来的贴图位置向外延伸。
该属性值指定了边框图像区域从边框盒子向外延伸的距离。初始值为0。该属性接受最多4个为正的长度值或无单位数字。长度值即为向外延伸的确定距离，无单位数字则要与边框宽度相乘得到向外延伸距离，这与border-image-width属性值为无单位数字的情况类似。

(5)border-image-repeat控制图片填充边框区域的重复方式，
可以为该属性指定最多两个值。如果值为1个，在边框的竖直方向和水平方向均应用该值。如果指定了两个值，第一个值应用于边框水平方向，第二个值应用于边框竖直方向。
值包括：

1. stretch: 初始值。边框图片被拉伸以填充区域。
2. repeat: 图片平铺以填充区域，必要时每个部分会用多个图片块填充。
3. round:图片平铺以填充区域，若有必要避免每个部分用多个图片块填充，图片会被重新缩放，然后进行填充
4. space:图片平铺以填充区域。如果区域无法用整片图片填满，在每部分之间会加入空隙以填满区域。注意，该属性值并非所有浏览器都支持。

可以简写为一组：
border-image: url(’…/assets/buttonbg.png’) 10 10 round;

实例：
现有一个button按钮

<button class="mybutton">点击提交</button>
<style>
.mybutton
{
font-size: 30px;
width: 400px;
height:100px;
color: blue;
border:16px solid transparent;
border-image-source:url('../assets/buttonbg.png');
border-image-slice: 16 16 fill;
border-image-repeat: stretch;
}
</style>

效果如下：

原图大小：

此时可以改变按钮的大小，如果宽度变为600px，它的宽度高度都可以做到自动拉长：

.mybutton
{
height:40px;
width: 600px;
}

如下图按钮被完美的拉伸了：

实现边框渐变，注无法实现圆角，只能实现正角度效果，如果想要实现圆角边框渐变可以使用背景中写入渐变，然后在叠加一层即可。

div{
width: 200px;
height:300px;
border:20px solid;
border-image: linear-gradient( red, blue) 20 20;
}

box-shadow阴影

语法：
box-shadow:x轴(可使用负数) y轴(可使用负数) 阴影模糊值大小 阴影颜色 内阴影(inset)。
默认是外阴影，如果是内阴影就在最后一个参数中加上inset，如果外阴影无需输入。

实例,内发光效果：

.mydiv
{
  width: 200px;
  height:200px;
  border: 2px solid green;
  box-shadow: 0px 0px 20px inset;
  background-color: yellow;
}

实例，多层投影

.mydiv
{
  width: 200px;
  height:200px;
  border: 2px solid black;
  background-color: yellow;
box-shadow: -10px 0px 10px red,0px -10px 10px green,10px 0px 10px blue,0px 10px 10px orange;
}

实例，正常外发光：

.mydiv
{
  width: 200px;
  height:200px;
  border: 2px solid black;
  background-color: yellow;
 box-shadow: 0px 0px 20px red;
}

实例，正常投影：

.mydiv
{
  width: 200px;
  height:200px;
  border: 2px solid black;
  background-color: yellow;
 box-shadow: 10px 10px 20px green;
}