一、border属性
border：border-width border-style border-color;
- border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以；
- border-style：边框样式，一般用 solid 多一点，dashed（虚线）、dotted（点状线）也有；
- border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；
边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ;
所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ;
单属性也可以有组合写法：
border-width:上 右 下 左；（顺时针方向）
border-width:上 左 右 下；
border-width:上下 左 右 ；
border-width:四个方向；
border-style | border-color也可以这样设置，还可以根据方向来用组合写法：
border-left : 边框宽度 边框样式 边框颜色；
二、案例
1. 三角形阴影
效果图-三角形阴影
代码(使用uview框架)：
- 方法一：
<view class="reply-box">
<view class="triangle"></view>
<view class="u-flex">
<u-avatar src=""></u-avatar>
<text class="f-s-14 c-111 u-m-l-20">客服1866</text>
</view>
<view class="u-m-t-10">
亲你好！我们的商品是没有问题的哦！非常经济实惠好用的啵家回复商家回复商家回复商家回复商家
</view>
</view>
.reply-box {
position: relative;
background-color: #F7F7F7;
border-radius: 6rpx;
// box-shadow: -1rpx -1rpx 1rpx rgba($color: #000000, $alpha: 0.16);
filter: drop-shadow(0 0 6rpx rgba($color: #000000, $alpha: 0.16));
padding:20rpx;
.triangle {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f7f7f7;
/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
position: absolute;
top: -10px;
left: 10%;
margin-left: -10px;
}
}
-
方法二：
效果图-三角形阴影
<view class="reply-box u-p">
<view class="triangle"></view>
<view class="filter"></view>
<view class="u-flex">
<u-avatar src=""></u-avatar>
<text class="f-s-14 c-111 u-m-l-20">客服1866</text>
</view>
<view class="u-m-t-10">
亲你好！我们的商品是没有问题的哦！非常经济实惠好用的啵家回复商家回复商家回复商家回复商家
</view>
</view>
.reply-box {
position: relative;
z-index: 10;
background-color: #F7F7F7;
border-radius: 6rpx;
box-shadow: -1rpx -1rpx 1rpx rgba($color: #000000, $alpha: 0.16);
// filter: drop-shadow(0 0 6rpx rgba($color: #000000, $alpha: 0.16));
.triangle {
border-left: 24rpx solid transparent;
border-right: 24rpx solid transparent;
border-bottom: 10px solid #F7F7F7;
/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
position: absolute;
top: -18rpx;
left: 10%;
margin-left: -20rpx;
z-index: 5;
}
.filter {
// transparent：透明的意思
border-left: 24rpx solid transparent;
border-right: 24rpx solid transparent;
border-bottom: 24rpx solid rgba(0,0,0,0.16);
position: absolute;
top: -24rpx;
left: 10%;
margin-left: -20rpx;
z-index: -5;
// filter: blur(4rpx);
filter: drop-shadow(-1rpx -1rpx 1rpx rgba($color: #000000, $alpha: 0.16));
/*这又设计到滤镜的知识*/
}
}
案例2.
案例2效果图
代码：
<template>
<view class="">
<view class="triangle"></view>
</view>
</template>
<script>
</script>
<style>
.triangle {
border-style: solid;
border-width: 30px 50px 60px 80px;
/*我们可以控制各方向边框的宽度，做出各种不同的三角形*/
border-color: #f00 #0f0 #00f #0ff;
/*四个方向的颜色自由设置，当设置其他三个方向或两个方向的颜色为transparent(透明色)时，另一方向就成了一个三角形*/
width: 0;
/*盒子宽度为0，四个方向的border宽度一致，可以用border做正方形*/
margin: 100px;
}
</style>
案例3. 画一个三角形
案例3效果图
代码：
<template>
<view class="">
<view class="triangle"></view>
</view>
</template>
<script>
</script>
<style>
.triangle {
/*四个方向的颜色自由设置，当设置其他三个方向或两个方向的颜色为transparent(透明色)时，另一方向就成了一个三角形*/
width: 0;
/*盒子宽度为0，四个方向的border宽度一致，可以用border做正方形*/
margin: 100px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #0ff;
}
</style>
案例4.三角形的阴影
案例4效果图1
相当于是两个三角形叠在一起，负责阴影的三角形比无阴影的三角形位置多出来一些就行。
方法1 代码：
<template>
<view class="">
<view class="wrapper">
<view class="note">
<span class="triangle"></span>
<span class="filter"></span>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.note {
margin: 100px;
width: 200px;
height: 80px;
background: #f60;
position: relative;
border-radius: 5px;
box-shadow: 0 0 10px 0px #000;
/*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/
}
.triangle {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f60;
/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.filter {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
z-index: -1;
filter: blur(2px);
/*这又设计到滤镜的知识*/
}
</style>
案例4效果图2
drop-shadow 不支持内阴影，但是支持不规则图形的阴影
方法2 代码：
<template>
<view class="">
<view class="wrapper">
<view class="note">
<span class="triangle"></span>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.note {
margin: 100px;
width: 200px;
height: 80px;
background: #f60;
position: relative;
border-radius: 5px;
/*box-shadow: 0 0 10px 0px #000;*/
/*水平偏移---垂直偏移---模糊度---扩张半径---颜色*/
filter: drop-shadow(0 0 6px #000);
/*看清楚哦，drop-shadow没有扩张半径*/
}
.triangle {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f60;
/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
</style>
案例5.三角形的边框
案例5.三角形的边框-效果图
三角形的边框可以这样写：写个三角形，沉在箭头下边，颜色设置成边框颜色，位置比箭头稍高一些（容器边框宽度值）就ok；三角形阴影同理。
代码：
<template>
<view class="">
<view class="wrapper">
<view class="note"></view>
</view>
</view>
</template>
<script>
</script>
<style>
.note {
margin: 100px;
width: 200px;
height: 80px;
background: #f0f;
position: relative;
border-radius: 5px;
border: 1px solid #000;
}
.note:after {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #f0f;
/*我们一般根据方向来写三角形，这样容易记忆；箭头指向的反方向的颜色设置为你想要的，然后箭头方向不要写，另外两个方向的颜色设置为transperent透明*/
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.note:before {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
position: absolute;
top: -11px;
/*写个三角形，沉在箭头下边，颜色设置成边框颜色，位置比箭头稍高一些（容器边框宽度值），就可以了*/
left: 50%;
margin-left: -10px;
z-index: -1;
}
</style>
三、border-radius 圆角
css3 属性 border-radius，“边框半径”，值可以用 px、em、pt、百分比等。
border-radius 支持四个角使用不同弧度，方向依次是左上--右上--右下--左下（是从左上开始，顺时针）。
border-radius 还可以单独对每个角设置：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
单独设置可以写两个值，第一个值是水平半径，第二个值是垂直半径；如果只有一个值，那么水平和垂直相等。
案例1、多形状圆角
案例1-效果图
代码：
<template>
<view class="">
<view class="test">
</view>
</view>
</template>
<script>
</script>
<style>
.test {
width: 200px;
height: 80px;
margin: 100px;
background: #ffaaff;
border-radius: 15px 20px 35px 50px / 10% 25% 1em 50%;
/*水平-----/-----垂直，中间用“/”隔开*/
/*左上水平 右上水平 右下水平 左下水平 / 左上垂直 右上垂直 右下垂直 左下垂直*/
/*这种方法不推荐使用，太乱了，傻傻分不清楚*/
}
</style>
案例2.多重边框
2.1 outline 制作多重边框
outline 制作多重边框-效果图
边框可以用 outline 来写，有一个相关的属性 outline-offset，可以控制描边与边缘的位置关系，可以设置成负值；
outline 制作多重边框，最多只能两层，而且不能是弧形的；
代码：
<template>
<view class="">
<view class="test">
</view>
</view>
</template>
<script>
</script>
<style>
.test {
margin: 100px;
width: 200px;
height: 80px;
border: 10px solid #ffaa7f;
outline: 15px solid #ffaaff;
outline-offset: -25px;
}
</style>
2.2 box-shadow 制作多重边框
box-shadow 制作多重边框 -效果图
box-shadow 可以做很多层（多了会很卡，电脑性能问题），而且配合 border-radius 属性可以做出弧形；
box-shadow 是不占据空间的，所以无法响应事件，可以利用 inset 设置成内阴影，在扩大空间就ok；
代码：
<template>
<view class="">
<view class="test">
</view>
</view>
</template>
<script>
</script>
<style>
.test {
margin: 100px;
width: 200px;
height: 80px;
border: 10px solid #ffaaff;
border-radius: 25% 30% 50% 29%;
box-shadow: 0 0 0 10px #ffaa00, 0 0 0 20px #ffaa00, 0 0 0 10px #FA3534 inset;
/*水平偏移---垂直偏移---扩张半径---模糊度---颜色*/
/*可以写多个阴影，用逗号隔开*/
/*inset是内阴影*/
/*由于box-shadow属性并不占据空间，所以是无法响应事件的，我们可以利用inset内阴影，再用padding扩充空间就好了*/
}
</style>
