[每天进步一点点~] uni-app css border 三角形阴影(不规则图形阴影) & 多重边框的制作

一、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框架)：

• 方法一：

                        
                        
                            
                            客服1866
                        
                        
                            亲你好！我们的商品是没有问题的哦！非常经济实惠好用的啵家回复商家回复商家回复商家回复商家
                        
                    
.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;
            }
        }

• 方法二：

  
  
  效果图-三角形阴影

                        
                        
                        
                            
                            客服1866
                        
                        
                            亲你好！我们的商品是没有问题的哦！非常经济实惠好用的啵家回复商家回复商家回复商家回复商家
                        
                    

.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效果图

代码：

案例3. 画一个三角形

案例3效果图

代码：

案例4.三角形的阴影

案例4效果图1

相当于是两个三角形叠在一起，负责阴影的三角形比无阴影的三角形位置多出来一些就行。
方法1 代码：

案例4效果图2

drop-shadow 不支持内阴影，但是支持不规则图形的阴影
方法2 代码：

案例5.三角形的边框

案例5.三角形的边框-效果图

三角形的边框可以这样写：写个三角形，沉在箭头下边，颜色设置成边框颜色，位置比箭头稍高一些（容器边框宽度值）就ok；三角形阴影同理。
代码：

三、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-效果图

代码：

案例2.多重边框

2.1 outline 制作多重边框

outline 制作多重边框-效果图

边框可以用 outline 来写，有一个相关的属性 outline-offset，可以控制描边与边缘的位置关系，可以设置成负值；
outline 制作多重边框，最多只能两层，而且不能是弧形的；

代码：

2.2 box-shadow 制作多重边框

box-shadow 制作多重边框 -效果图

box-shadow 可以做很多层（多了会很卡，电脑性能问题），而且配合 border-radius 属性可以做出弧形；
box-shadow 是不占据空间的，所以无法响应事件，可以利用 inset 设置成内阴影，在扩大空间就ok；

代码：