欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css邊框修飾實(shí)現(xiàn)代碼

  發(fā)布時(shí)間：2024-09-18 14:27:19   作者：玩玩編程   我要評(píng)論
本文介紹了CSS中設(shè)置邊框的幾種主要屬性,包括邊框樣式（如實(shí)線、虛線等）、邊框?qū)挾龋梢詥为?dú)設(shè)置每個(gè)方向的寬度）、邊框顏色（支持單獨(dú)為每個(gè)方向設(shè)置顏色）以及圓角邊框的設(shè)置,通過(guò)這些屬性的組合使用,可以實(shí)現(xiàn)豐富的邊框效果

一、設(shè)置線條樣式

通過(guò) border-style 屬性設(shè)置，可選擇的一些屬性如下：

  • dotted：點(diǎn)線
  • dashed：虛線
  • solid：實(shí)線
  • double：雙實(shí)線

效果如下：

二、設(shè)置邊框線寬度

① 通過(guò) border-width 整體設(shè)置上下左右邊框

border-width: 5px;

效果如下：

② 分別設(shè)置邊框四個(gè)方向的寬度

  • border-left-width: 設(shè)置左邊框?qū)挾?/li>
  • border-right-width: 設(shè)置右邊框?qū)挾?/li>
  • border-top-width: 設(shè)置上邊框?qū)挾?/li>
  • border-bottom-width: 設(shè)置下邊框?qū)挾?/li>
border-left-width: 20px;
border-top-width: 15px;
border-right-width: 10px;
border-bottom-width: 5px;

效果如下：

三、設(shè)置邊框顏色

① 通過(guò) border-color 屬性設(shè)置四個(gè)方向的邊框顏色

border-color: red;

 效果如下：

② 分別設(shè)置四個(gè)方向的邊框顏色

  • border-left-color： 設(shè)置左邊框顏色
  • border-top-color： 設(shè)置上邊框顏色
  • border-right-color： 設(shè)置右邊框顏色
  • border-bottom-color：設(shè)置下邊框顏色
border-left-color: red;
border-top-color: green;
border-right-color: blue;
border-bottom-color: blueviolet;

 效果如下：

四、設(shè)置圓角邊框

① 通過(guò) border-radius 屬性整體設(shè)置四個(gè)圓角

border-radius: 50px;

效果如下：

② 分別設(shè)置四個(gè)方向的圓角邊框

  • border-top-left-radius: 設(shè)置左上角圓角
  • border-bottom-left-radius: 設(shè)置左下角圓角
  • border-top-right-radius: 設(shè)置右上角圓角
  • border-bottom-right-radius: 設(shè)置右下角圓角
 border-top-left-radius: 50px;
 border-bottom-left-radius: 20px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;

效果如下：

注意：修飾邊框時(shí)，邊框線條樣式、邊框?qū)挾榷家O(shè)置才會(huì)顯示出來(lái)!!

到此這篇關(guān)于css邊框修飾的文章就介紹到這了,更多相關(guān)css邊框修飾內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css背景和邊框標(biāo)簽實(shí)例詳解

    本文通過(guò)代碼給大家介紹css背景和邊框標(biāo)簽的一些知識(shí)，通過(guò)相關(guān)屬性設(shè)置背景顏色，背景圖像，對(duì)css背景與邊框的相關(guān)知識(shí)感興趣的朋友一起看看吧
    2021-05-21

  • css 中多種邊框的實(shí)現(xiàn)小竅門(mén)

    這篇文章主要介紹了css 中多種邊框的實(shí)現(xiàn)小竅門(mén),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)
    2021-04-07

  • 一文教你玩轉(zhuǎn)CSS border(邊框)

    這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS border(邊框),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-02-19

  • CSS 奇思妙想邊框動(dòng)畫(huà)效果的實(shí)現(xiàn)

    這篇文章主要介紹了CSS 奇思妙想邊框動(dòng)畫(huà)效果的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-01-18

  • CSS border邊框一半或者部分可見(jiàn)的實(shí)現(xiàn)代碼

    這篇文章主要介紹了CSS border邊框一半或者部分可見(jiàn)的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-12-07

  • css 收貨地址平行四邊形的線條樣式示例代碼

    這篇文章主要介紹了css 收貨地址平行四邊形的線條樣式示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-10-09

  • 通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼

    這篇文章主要介紹了通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-15

最新評(píng)論