border： 这属性，好像我开始学前端的时候就有了，设置元素的边框线
一般是 border: 1px solid color;1、border-image: 边框图片
border-image: url('')
border-image-source:用在边框的图片的路径
border-image-slice:图片边框向内偏移
border-image-width:图片边框的宽度
border-image-outset:边框图像区域超出边框的量
border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)暂时还没有用到这个属性，
官方的dome:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:10px solid transparent;
width:40px;
padding:5px 40px;
border-image: url(/i/border_image_button.png) 0 14 0 14 stretch;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 border-image 属性。</p>
<div>Search</div>
<p>这是我们使用的图片：</p>
<img src="/i/border_image_button.png">
</body>
</html>
2、border-radius: 设置圆角，
border-radius: 设置圆角，当百分之五十的时候，变为一个圆。
border-radius: 50%; border-radius: 10px;border-bottom-left-radius: 10px; 下左
border-bottom-right-radius: 10px; 下右
border-top-left-radius: 10px; 上左
border-top-right-radius: 10px; 上右
还可以设置奇奇怪怪的东西===>
<style>
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
div {
/*border-radius: 2em 1em 4em / 0.5em 3em;*/
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
border: 1px solid;
width: 100px;
height: 60px;
}
</style>
<body>
<div>
哈哈哈哈
</div>
</body>3、box-shadow: 设置元素的周边阴影，
box-shadow: 水平偏移，垂直偏移，模糊距离，阴影尺寸，颜色，内部或外部阴影(默认外部)。
box-shadow: 10px 10px 20px 40px red inset;当前面设置三个值的时候，取前面三个，(水平偏移，垂直偏移，模糊距离)inset内部，outse外部
当设置水平与垂直的偏移都为0的时候，设置的四边的阴影，
box-shadow与text-shadow：基本上是类似的，一个作用于元素，一个作用于文字。
<style>
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
div{
box-shadow: 10px 10px 40px red;
border: 1px solid;
width: 100px;
height: 40px;
}
</style>
<body>
<div>
哈哈哈哈
</div>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。