亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS 制作帶邊框背景色透明的消息框

  發(fā)布時(shí)間：2018-09-03 15:31:06   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS 制作帶邊框背景色透明的消息框的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

寫(xiě)個(gè)消息框容易太容易了，網(wǎng)上一搜就一大堆教程。直接拷貝粘貼到自己項(xiàng)目就可以啦。大多是用::after或者::before實(shí)現(xiàn)三角形，絕對(duì)定位移動(dòng)到邊上成為消息框的角角。

但是如果要我們實(shí)現(xiàn)背景色是透明的消息框，如下：

似乎常用的消息框?qū)懛ㄟ@種操作是實(shí)現(xiàn)不了的。

難點(diǎn)一

用常用的方式實(shí)現(xiàn)的消息框，想要改成透明背景，似乎不太可能。

因?yàn)槿绻⒖蛴羞吙虻脑?，消息框的角通常是?:after 與 ::before 做成三角形，然后一大點(diǎn)的三角形與小一點(diǎn)的三角形重疊而成，如果我們想要把消息框的角變成透明的，總會(huì)透到后面作為是模擬邊框的三角形的顏色。

(如上圖我把作為背景三角形設(shè)置了 opacity: .5 透的是作為邊框的顏色，兩個(gè)顏色混合在了一起)

難點(diǎn)二

還有一個(gè)問(wèn)題就是消息框的角透明會(huì)透到消息框的邊框線。

如何實(shí)現(xiàn)

好了，接下來(lái)說(shuō)說(shuō)我是如何實(shí)現(xiàn)的。

消息框的角還有另一種實(shí)現(xiàn)方法就是就是寫(xiě)個(gè)小正方形旋轉(zhuǎn)45度。

然后給正方形上邊和右邊邊框

然后再給個(gè)透明背景色 background: hsla(0, 0, 0, 0);

好了一個(gè)可以透明到背景的角實(shí)現(xiàn)了我們?cè)賮?lái)解決難題二。

想寫(xiě)個(gè)消息框的主體

好，然后用主體div的::after 和 ::before 實(shí)現(xiàn)左邊和右邊的邊框，中間隔開(kāi)要放三角形的位置

然后給主體div設(shè)置下邊框

哈哈 是不是解決了難題二。

最終效果

調(diào)下絕對(duì)定位的位置，調(diào)下z-index。

好了接下啦，鎧甲合體?。?！

詳細(xì)代碼

<div class="warp" >
    <div class="box" >
        <div class="horn" ></div>
        <div class="content">低調(diào)哥挺帥</div>
    </div>
</div>

.warp{
    margin: auto;
    width: 75%;
    height: 100vh;
    z-index: 1;
    position: relative;
}
.box{
    overflow: hidden;
    .horn{
        right: .75rem;
        top: .18rem;
        position: absolute;
        transform: rotate(45deg);
        width: .25rem;
        height: .25rem;
        border-width: 0.02rem 0rem 0rem 0.02rem; 
        border-style: solid;
        border-color:#fff; 
        background: #000;
        background: hsla(0, 0, 0, 0);
    }
    .content{
        display: none;
        position: relative;
        margin: .3rem 0 .25rem 0;
        width: auto;
        float: right;
        padding: .1rem .3rem;
        font-size: .3rem;
        color: #fff;
        background: hsla(0, 0, 0, .0);
        letter-spacing: .05rem;
        border-bottom: .02rem solid #fff;
        border-radius:.35rem;
        &::after{
            content:'';
            position: absolute;
            width: 1.305rem;
            height: 103%;
            top:0;
            left: 0;
            border-width: 0.02rem .0rem .02rem .02rem;
            border-style: solid;
            border-color: #fff;
            border-radius: .35rem .0rem 0 .35rem;
        }
        &::before{
            content:'';
            position: absolute;
            width: .71rem;
            height: 103%;
            top:0;
            right:0;
            border-width: 0.02rem .02rem .02rem .0rem;
            border-style: solid;
            border-color: #fff;
            border-radius: 0 .35rem .35rem 0;
        }
    }

總結(jié)

以上所述是小編給大家介紹的CSS 制作帶邊框背景色透明的消息框，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論