整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          今天剛學會的在微信小程序中-利用css實現邊框內凹半圓

                <view class="certificateContent">
                  <view class="certificateName">
                  </view>
                  <view class="certificateCode">
                    <view class="code">
                    </view>
                  </view>
                </view>

          使用border-radius來實現半圓的形狀,在利用偽類元素::before和::after放在標簽名code的前后,最后利用定位position來放置在合適的位置。具體實現樣式如下:

          <style lang="scss" scoped>
           .certificateContent {
            height: auto;
            padding: 0px 16px;
              .certificateName {
                height:100rpx;
                 background: red
              }
          .certificateCode {
              height: 100rpx;
              background: red
              border-top: 0;
              padding: 2px 16px 20px 16px;
              .code {
                position: relative;
              }
              .code::before {
                content: "";
                width: 10px;
                height: 20px;
                position: absolute;
                border: 1px solid #ffffff;
                border-radius: 0 20px 20px 0;
                border-left: none;
                position: absolute;
                left: -16px;
                top: -10px;
                background: #f6f7f8;
              }
              .code::after {
                content: "";
                width: 10px;
                height: 20px;
                position: absolute;
                border: 1px solid #ffffff;
                border-radius: 20px 0px 0px 20px;
                border-right: none;
                position: absolute;
                right: -16px;
                top: -10px;
                background: #f6f7f8;
              }
            }
          }
          
          </style>

          實現效果如圖:


          在前端開發中經常會用到很多的簡易圖形,例如三角形,箭頭,圓形等。有很多人一開始會想著用小的圖片實現,不過這樣會增加頁面請求次數,延緩頁面加載效果。

          在CSS中有個border屬性,它完全可以達到制作各種簡易圖形的效果,今天我們就一起來看看吧。

          文章中的代碼都已經放在了github上,感興趣的同學自取。

          https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

          CSS

          border講解

          在制作各種簡易圖形之前,我們先來看看border屬性的使用。

          border是一個復合屬性。

          • border-width表示邊框寬度。

          • border-style表示邊框樣式,設置實線,虛線,點狀等。

          • border-color表示邊框顏色,還可以設置transparent,表示透明。

          border又分為上下左右四個方向,每個方向都占據各自的空間,不會出現重疊的地方,尤其是在四個方向的邊框都設置的情況下,在四個角處也不會出現重疊。

          我們來看個最簡單的例子,在四個方向上都設置邊框,賦予不同的顏色。

          圖片1

          通過上面的圖片1可以看出,四個角處是分離,沒有重合的。

          梯形

          首先我們來看看梯形的效果圖。

          梯形效果圖

          我們再來分析下梯形是如何實現的。

          • 因為我們完全是通過border設置,所以這個div的高度應該為0。

          • 梯形的左右兩個腰,恰好如同border在角的銜接處,然后將兩側的border-style設置為transparent。

          因此我們可以得到以下的CSS代碼。

          梯形的CSS代碼

          修改border-left和border-right的寬度值,可以改變梯形的形狀。

          三角形

          三角形也分為上下左右四個方向,我們首先來看看總體的形狀。

          三角形

          然后我們也來分析下如何實現這個效果,以下三角形為例。

          • 因為是呈現三角形的形狀,剛好契合border在角落的銜接處,因此高度和寬度都應該為0。

          • 下三角形是上部有區域,所以要設置border-top。

          • border-left和border-right兩個方向都要設置寬度,然后設置為透明即可。

          因此得到以下的CSS代碼,設置不同方向border的寬度,三角形的形狀也會跟著變。

          下三角形CSS代碼

          同理,只要掌握了其中一個方向的三角形原理,就會輕松寫出其他方向三角形的CSS代碼。

          這里直接給出上三角形的CSS代碼。

          上三角形CSS代碼

          左三角形的CSS代碼如下所示。

          左三角形CSS代碼

          右三角形的CSS代碼如下所示。

          右三角形CSS代碼

          正方形-四種顏色

          接下來我們看一種基本的只用border設計的形狀。

          圖形

          它的實現方式也很簡單,只需要將width和height設置為0,然后將border四個方向的寬度設置成一樣的即可。

          得到的代碼如下所示。

          CSS代碼

          直角三角形

          基于上述的實現,我們可以得到左下,左上,右上,右下四種三角形。

          首先看看基本形狀。

          直角三角形

          看到圖形后,我們很容易發現,只要隱藏掉連接的兩個方向的border,顯示出另外兩個方向的border,就可以得到直角三角形。

          這里我們只展示出左上三角形的CSS代碼。

          左上直角三角形CSS代碼

          其他方向的直角三角形代碼可類比得出,大家可以試一下。

          六角星

          首先我們看看六角星的形狀。

          六角星

          看到這個圖形,大家應該能想到可以由上下兩個三角形構成,只要將上下兩個三角形位置對應準確。

          這里為了節省頁面元素的空間,我們可以采用偽元素去實現。

          • 將頁面顯示元素設置為上三角形。

          • 利用:after偽元素設置下三角形。

          • 設置偽元素的position為absolute,調節right和top值。

          通過上述分析,我們得到以下CSS代碼。

          六角星CSS代碼

          圓形

          與border屬性搭配使用的還有一個很常用的屬性,那就是border-radius。

          border-radius是專門設置圓角的,可以讓90度角變為圓角。

          我們首先看看最基本的圓形的樣子。

          圓形

          其實我們只需要將border-radius屬性設置為寬或者高的一半以上即可。代碼如下所示。

          圓形

          同心圓

          我們來看看同心圓的樣子。

          同心圓

          同心圓只需要設置一個border邊框,給border設置一個特殊的背景色,給div設置成白色背景即可。

          同心圓CSS代碼

          半圓

          我們來看看半圓的形狀。

          半圓

          半圓的效果是如何實現的呢?

          • 首先元素自身高度設置為0,設定寬度值。

          • 設定上部和右部的border。

          • 設定左上角和右上角的border-radius值。

          得到的代碼如下所示。

          上半圓

          同理,下半圓,左半圓和右半圓修改對應的值就可以獲得。

          結束語

          今天這篇文章主要通過border屬性,畫出了一系列簡易的圖形,這在實際中是很實用的,大家學會了嗎?

          度圖形在一些網頁中會用到,實現方法有很多。可以通過加載背景圖或者放img圖片來實現,下面說說用css的圓角來實現有弧度的圖形!

          具體效果圖:

          實現代碼:

          通過偽類追加一個半圓效果拼裝成一個有弧度的圖形


          主站蜘蛛池模板: 99久久精品国产高清一区二区| 人妻少妇AV无码一区二区| 天堂资源中文最新版在线一区 | 高清一区二区三区日本久| 亚洲一区二区久久| 国产成人久久一区二区不卡三区| 国产精品无码一区二区在线观一| 久久久人妻精品无码一区| 91精品福利一区二区| 99久久精品国产高清一区二区| 精品人妻无码一区二区三区蜜桃一 | 亚洲欧洲∨国产一区二区三区| 精品久久久久久无码中文字幕一区| 日韩电影一区二区| 亚洲综合色自拍一区| 亚洲日韩激情无码一区| 国产精品无码一区二区三区在| 国产福利酱国产一区二区| 日本在线一区二区| 亚洲AV无码一区二区乱孑伦AS| 国产激情无码一区二区app| 午夜福利国产一区二区| 久久精品视频一区| 中文字幕aⅴ人妻一区二区| 色窝窝无码一区二区三区| 91在线视频一区| 日韩视频在线一区| 久久精品一区二区| 亚洲一区免费观看| 无码少妇精品一区二区免费动态| 精品国产免费一区二区三区| 日本一区二区免费看| 国产主播福利一区二区| 一区二区三区视频网站| 国模吧无码一区二区三区| 日韩精品乱码AV一区二区| 人妻少妇精品视频三区二区一区| 精品一区二区久久久久久久网精 | 一区二区中文字幕| 在线不卡一区二区三区日韩| 中文字幕精品亚洲无线码一区应用|