[每天进步一点点~] 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框架):

  • 方法一:
<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>

推荐阅读更多精彩内容

  • 第一节:border-width的特性 border-width 不支持百分比 原因:border 的语义决定,所...
    辉夜乀阅读 531评论 0 1
  • css3三角形画法 .content{width:0px; height:0px; ...
    白菜_37e2阅读 39评论 0 0
  • 一.只写一个div,用css画出一个太极 1.画出底层的大圆,分别为两个黑白半圆 #taiJi{ width:0;...
    charllote8阅读 323评论 0 1
  • 一、CSS中的属性和取值 1.文本类属性: text-align属性:此标签内容的水平对齐方式,内容须为具体文字/...
    刘远舟阅读 59评论 0 0
  • # 内容概述 ## 一. css特性 + 继承 + 层叠 ### 1. CSS属性的继承 CSS中有些属性是可继承...
    Autism_8eaf阅读 37评论 0 0