[每天進(jìn)步一點(diǎn)點(diǎn)~] uni-app css border 三角形陰影(不規(guī)則圖形陰影) & 多重邊框的制作

一、border屬性

border：border-width border-style border-color;
  • border-width：邊框?qū)挾龋荒転榘俜直龋驗(yàn)椴粫?huì)根據(jù)設(shè)備寬度改變；同理，outline | text-shadow | box-shadow 也不可以；
  • border-style：邊框樣式，一般用 solid 多一點(diǎn)，dashed（虛線）、dotted（點(diǎn)狀線）也有；
  • border-color：邊框顏色，默認(rèn)顏色是元素的文本顏色，如果沒(méi)有設(shè)置，那就從父元素繼承文本顏色；

邊框可以根據(jù)方向單獨(dú)設(shè)置，上下左右，border-top | border-bottom | border-left | border-right ;
所以屬性也可以單獨(dú)設(shè)置，border-top-width | border-top-style | border-top-color ;
單屬性也可以有組合寫法：
border-width:上 右 下 左；（順時(shí)針?lè)较颍?br> border-width:上 左 右 下；
border-width:上下 左 右 ；
border-width:四個(gè)方向；
border-style | border-color也可以這樣設(shè)置，還可以根據(jù)方向來(lái)用組合寫法：
border-left : 邊框?qū)挾?邊框樣式 邊框顏色；

二、案例

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">
                            親你好！我們的商品是沒(méi)有問(wèn)題的哦！非常經(jīng)濟(jì)實(shí)惠好用的啵家回復(fù)商家回復(fù)商家回復(fù)商家回復(fù)商家
                        </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;
                /*我們一般根據(jù)方向來(lái)寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設(shè)置為你想要的，然后箭頭方向不要寫，另外兩個(gè)方向的顏色設(shè)置為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">
                            親你好！我們的商品是沒(méi)有問(wèn)題的哦！非常經(jīng)濟(jì)實(shí)惠好用的啵家回復(fù)商家回復(fù)商家回復(fù)商家回復(fù)商家
                        </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;
                /*我們一般根據(jù)方向來(lái)寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設(shè)置為你想要的，然后箭頭方向不要寫，另外兩個(gè)方向的顏色設(shè)置為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));
                /*這又設(shè)計(jì)到濾鏡的知識(shí)*/
            }
        }

案例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;
        /*四個(gè)方向的顏色自由設(shè)置，當(dāng)設(shè)置其他三個(gè)方向或兩個(gè)方向的顏色為transparent(透明色)時(shí)，另一方向就成了一個(gè)三角形*/
        width: 0;
        /*盒子寬度為0，四個(gè)方向的border寬度一致，可以用border做正方形*/
        margin: 100px;
    }
</style>

案例3. 畫(huà)一個(gè)三角形

案例3效果圖

代碼：

<template>
    <view class="">
        <view class="triangle"></view>
    </view>
</template>

<script>
</script>

<style>
    .triangle {
        /*四個(gè)方向的顏色自由設(shè)置，當(dāng)設(shè)置其他三個(gè)方向或兩個(gè)方向的顏色為transparent(透明色)時(shí)，另一方向就成了一個(gè)三角形*/
        width: 0;
        /*盒子寬度為0，四個(gè)方向的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

相當(dāng)于是兩個(gè)三角形疊在一起，負(fù)責(zé)陰影的三角形比無(wú)陰影的三角形位置多出來(lái)一些就行。
方法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;
        /*水平偏移---垂直偏移---模糊度---擴(kuò)張半徑---顏色*/
    }

    .triangle {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #f60;
        /*我們一般根據(jù)方向來(lái)寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設(shè)置為你想要的，然后箭頭方向不要寫，另外兩個(gè)方向的顏色設(shè)置為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);
        /*這又設(shè)計(jì)到濾鏡的知識(shí)*/
    }
</style>
案例4效果圖2

drop-shadow 不支持內(nèi)陰影，但是支持不規(guī)則圖形的陰影
方法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;*/
        /*水平偏移---垂直偏移---模糊度---擴(kuò)張半徑---顏色*/

        filter: drop-shadow(0 0 6px #000);
        /*看清楚哦，drop-shadow沒(méi)有擴(kuò)張半徑*/
    }

    .triangle {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #f60;
        /*我們一般根據(jù)方向來(lái)寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設(shè)置為你想要的，然后箭頭方向不要寫，另外兩個(gè)方向的顏色設(shè)置為transperent透明*/
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -10px;
    }
</style>

案例5.三角形的邊框

案例5.三角形的邊框-效果圖

三角形的邊框可以這樣寫：寫個(gè)三角形，沉在箭頭下邊，顏色設(shè)置成邊框顏色，位置比箭頭稍高一些（容器邊框?qū)挾戎担┚蚾k；三角形陰影同理。
代碼：

<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;
        /*我們一般根據(jù)方向來(lái)寫三角形，這樣容易記憶；箭頭指向的反方向的顏色設(shè)置為你想要的，然后箭頭方向不要寫，另外兩個(gè)方向的顏色設(shè)置為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;
        /*寫個(gè)三角形，沉在箭頭下邊，顏色設(shè)置成邊框顏色，位置比箭頭稍高一些（容器邊框?qū)挾戎担涂梢粤?/
        left: 50%;
        margin-left: -10px;
        z-index: -1;
    }
</style>

三、border-radius 圓角

css3 屬性 border-radius，“邊框半徑”，值可以用 px、em、pt、百分比等。

border-radius 支持四個(gè)角使用不同弧度，方向依次是左上--右上--右下--左下（是從左上開(kāi)始，順時(shí)針）。
border-radius 還可以單獨(dú)對(duì)每個(gè)角設(shè)置：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
    單獨(dú)設(shè)置可以寫兩個(gè)值，第一個(gè)值是水平半徑，第二個(gè)值是垂直半徑；如果只有一個(gè)值，那么水平和垂直相等。

案例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%;
        /*水平-----/-----垂直，中間用“/”隔開(kāi)*/
        /*左上水平   右上水平   右下水平   左下水平  /  左上垂直   右上垂直   右下垂直   左下垂直*/
        /*這種方法不推薦使用，太亂了，傻傻分不清楚*/
    }
</style>

案例2.多重邊框

2.1 outline 制作多重邊框

outline 制作多重邊框-效果圖

邊框可以用 outline 來(lái)寫，有一個(gè)相關(guān)的屬性 outline-offset，可以控制描邊與邊緣的位置關(guān)系，可以設(shè)置成負(fù)值；
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 可以做很多層（多了會(huì)很卡，電腦性能問(wèn)題），而且配合 border-radius 屬性可以做出弧形；
box-shadow 是不占據(jù)空間的，所以無(wú)法響應(yīng)事件，可以利用 inset 設(shè)置成內(nèi)陰影，在擴(kuò)大空間就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;
        /*水平偏移---垂直偏移---擴(kuò)張半徑---模糊度---顏色*/
        /*可以寫多個(gè)陰影，用逗號(hào)隔開(kāi)*/
        /*inset是內(nèi)陰影*/
        /*由于box-shadow屬性并不占據(jù)空間，所以是無(wú)法響應(yīng)事件的，我們可以利用inset內(nèi)陰影，再用padding擴(kuò)充空間就好了*/
    }
</style>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第一節(jié)：border-width的特性 border-width 不支持百分比 原因：border 的語(yǔ)義決定，所...
    輝夜乀閱讀 1,062評(píng)論 0贊 1
  • css3三角形畫(huà)法 .content{width:0px; height:0px; ...
    白菜_37e2閱讀 333評(píng)論 0贊 0
  • 一.只寫一個(gè)div,用css畫(huà)出一個(gè)太極 1.畫(huà)出底層的大圓，分別為兩個(gè)黑白半圓 #taiJi{ width:0;...
    charllote8閱讀 880評(píng)論 0贊 1
  • 一、CSS中的屬性和取值 1.文本類屬性： text-align屬性：此標(biāo)簽內(nèi)容的水平對(duì)齊方式，內(nèi)容須為具體文字/...
    劉遠(yuǎn)舟閱讀 522評(píng)論 0贊 1
  • # 內(nèi)容概述 ## 一. css特性 + 繼承 + 層疊 ### 1. CSS屬性的繼承 CSS中有些屬性是可繼承...
    Autism_8eaf閱讀 108評(píng)論 0贊 0