css3的邊框新增加的特性有哪些-前端問答-PHP中文網

首頁

web前端

前端問答

css3的邊框新增加的特性有哪些

青灯夜游

Dec 14, 2021 pm 06:03 PM

css3邊框屬性

css3邊框新增加的特性有：border-radius、border-image、border-image-outset、border-image-repeat、border-image-slice、border-image-width等。

css3的邊框新增加的特性有哪些

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3的邊框新建增加的特性（屬性）

CSSborder-radius設定或檢索物件使用圓角邊框。設定或擷取物件的左下角圓角邊框。提供2個參數，2個參數以空格分隔，每個參數允許設定1個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則預設等於第1個參數設定或檢索物件的右下角圓角邊框。定義左上角邊框的形狀。定義右上角邊框的形狀。設定或檢索物件的邊框樣式使用圖像來填入。 #規定邊框影像超過邊框的量。 #規定圖片邊框是否應該重複（repeated）、拉伸（stretched）或鋪滿（ rounded）。 #規定影像邊框的向內偏移。 #規定要使用的圖像，取代 border-style 屬性中設定的邊框樣式。規定圖像邊框的寬度。 #規定行內元素被折行##3box-shadow在方框中新增一個或多個陰影。 3

屬性


		border-bottom-left-radius
3		border-bottom-right-radius
3		border-top-left-radius
3		border-top-right-radius
3		border-image
3		border-image-outset
3		border-image-repeat
3		border-image-slice
3		border-image-source
3		border-image-width
3		box-decoration-break

#########box-reflect######設定或檢索物件的倒影######3######### ###

border-image

CSS3中新增的邊框屬性，擴充了原盒子模型的功能，使得邊框具備背景圖片屬性。先前，border僅具備寬度、顏色和風格屬性.

實作邊框背景圖片屬性，通常使用padding和background屬性進行模擬，但是這樣就為設定盒子的背景增加了難度

#語法格式： 此文法為 CSS 縮寫樣式

border-image：

#　　 [##　　

#[source 圖片來源　　　　#

說明：

　　　　　　設定或擷取物件的邊框樣式使用影像路徑。

　　　　　　指定一個圖像用來取代border-style邊框樣式的屬性。當border-image為none或影像不可見時，將會顯示border-style所定義的邊框樣式效果。

　　　　　　對應的腳本特性為borderImageSource。

　　　　取值：

#　　　　　　none：無背景圖片。

　　　　　　none：無背景圖片。

　　　　　　：使用絕對或相對位址指定影像。

　 [ border-image-slice分割方法 ]

說明：

　　　　　　吧　　　　　　　　　　　　　　接　接牙接屬標籤未還是檢索物件的背景。

　　　　　　該屬性指定從上，右，下，左方位來分隔圖像，將圖像分成4個角，4條邊和中間區域共9份，中間區域始終是透明的（即沒圖像填充），除非加上關鍵字fill。

　　　　　　對應的腳本特性為borderImageSlice。

　　　　取值：

　　　　　　：以浮點數指定寬度。不允許負值。　　　　　　：以百分比指定寬度。不允許負值。

[ / [ border-image-width邊框寬度]? |

說明：

　　　　　　設定或擷取物件的邊框厚度。

　　　　　　此屬性用於指定使用多厚的邊框來承載被裁切後的影像。

　　　　　　此屬性可省略，由外部的border-width來定義。

　　　　　　對應的腳本特性為borderImageWidth。

　　　　取值：

　　　　　　：以長度值指定寬度。不允許負值。

　　　　　　：以百分比指定寬度。不允許負值。

　　　　　　：用浮點數指定寬度。不允許負值。

　　　　　　auto：若auto值被設置，則border-image-width採用與border-image-slice相同的值。

　　　　注意:此值得大小不會累加到盒子模型之上，chrome會有3像素的大小，其餘瀏覽器border的大小依然為0

# #

　　/ [border-image-outset 擴充方式]

　　　　說明：

　　　　　　置或擷取物件的邊框背景圖的擴充。

　　　　　　此屬性用於指定邊框影像向外擴展所定義的數值，即如果值為10px，則影像在原本的基礎上往外延展10px再顯示。

　　　　　　對應的腳本特性為borderImageOutset。

　　　　取值：

　　　　　　：以長度值指定寬度。不允許負值。

　　　　　　：用浮點數指定寬度。不允許負值。

]

　　[ border-image-repeat重複方式 ]

###### 　　　　 ###說明：### ######　　　　　〔　　　　　　　　　　──　　　──　　　──　　　──　　　」)。 ###

　　　　　　该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为　　　　　　　stretch，则可省略不写。

　　　　　　对应的脚本特性为borderImageOutset。

　　　　 取值：

　　　　　　stretch：指定用拉伸方式来填充边框背景图。

　　　　　　repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

　　　　　　round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果

　　　　　　space：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。写本文档时尚无浏览器能看到该效果

CSS3 新增属性实例

1、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) no-repeat center  ;
        border-image-source:none;
    }
</style>
</head>
<body>
    <div></div>
</body>

2、

<style>
div{
    width:300px;
    height:300px;
    background:url(./shuaige.jpg) center no-repeat ;
    border-image-source:url(./border.png);/*边框图片属性*/
    border-image-width:27px;/*边框图片宽度属性*/
    border-image-slice:27;/*边框图片切割属性*/
    border-image-outset:0px;/*边框图片扩展属性*/
    border-image-repeat:stretch;/*边框图片重复属性*/
}
</style>
</head>
<body>
    <div>
    </div>
</body>

3、

<style>
div{
    width:300px;
    height:300px;
    background:url(shuaige.jpg) no-repeat center;
    border-image-source:url(border.png);
    border-image-width:27px;
    border-image-slice:27;
    border-image-outset:0px;
    border-image-repeat:repeat;/*设定重复方式为重复*/
}
</style>
</head>
<body>
    <div>
    </div>
</body>

4、

<style>
            div{
                width:300px;
                height:300px;
                background:url(shuaige.jpg) no-repeat center;
                border-image-source:url(border.png);
                border-image-width:27px;
                border-image-slice:27;
                border-image-outset:0px;
                border-image-repeat:round;/*设定重复方式为round   会看情况进行缩放或缩小*/
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

5、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);/*边框图片属性*/
        border-image-width:27px;/*边框图片宽度属性*/
        border-image-slice:27 fill;
        /*设定边框图片背景填充内容部分,会显示第5块切割的内容*/
        border-image-outset:0px;/*边框图片扩展属性*/
        border-image-repeat:stretch;/*边框图片重复属性*/
    }
</style>
</head>
<body>
    <div>
    </div>
</body>

6、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:54;/*切割为宽度的2倍   会自动缩放*/
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

7、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:81;/*切割为宽度的3倍*/
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

8、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:27;
        border-image-outset:154px;/*向外扩展的大小*/
        border-image-repeat:repeat;
    }
</style>
</head>
<body>
<div>
</div>
</body>

（学习视频分享：css视频教程）

以上是css3的邊框新增加的特性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML和React的集成：實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合，構建高效的用戶界面。 1)使用JSX嵌入HTML元素，2)利用虛擬DOM優化渲染性能，3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀，還能提升應用性能。

React和HTML：渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據，並通過合成事件系統處理用戶事件。 1）使用useState管理狀態，如計數器示例。 2）事件處理通過在JSX中添加函數實現，如按鈕點擊。 3）渲染列表需使用key屬性，如TodoList組件。 4）表單處理需使用useState和e.preventDefault()，如Form組件。

後端連接：反應如何與服務器互動Apr 20, 2025 am 12:19 AM

React通過HTTP請求與服務器交互，實現數據的獲取、發送、更新和刪除。 1)用戶操作觸發事件，2)發起HTTP請求，3)處理服務器響應，4)更新組件狀態並重新渲染。

反應：專注於用戶界面（前端）Apr 20, 2025 am 12:18 AM

React是一種用於構建用戶界面的JavaScript庫，通過組件化開發和虛擬DOM提高效率。 1.組件與JSX：使用JSX語法定義組件，增強代碼直觀性和質量。 2.虛擬DOM與渲染：通過虛擬DOM和diff算法優化渲染性能。 3.狀態管理與Hooks：Hooks如useState和useEffect簡化狀態管理和副作用處理。 4.使用示例：從基本表單到高級的全局狀態管理，使用ContextAPI。 5.常見錯誤與調試：避免狀態管理不當和組件更新問題，使用ReactDevTools調試。 6.性能優化與最佳

React的角色：前端還是後端？澄清區別Apr 20, 2025 am 12:15 AM

reactisafrontendlibrary，focusedonBuildingUserInterfaces.itmanagesuistateandupdatesefficefited avelyuseVirusity diftualdom，and internactSwithBackendServIcesViaApisforDatahandling，butdoesnotprocessorcorsorsorstoredordordordoredairself。

在HTML中進行反應：構建交互式用戶界面Apr 20, 2025 am 12:05 AM

React可以嵌入到HTML中來增強或完全重寫傳統的HTML頁面。 1)使用React的基本步驟包括在HTML中添加一個根div，並通過ReactDOM.render()渲染React組件。 2)更高級的應用包括使用useState管理狀態和實現複雜的UI交互，如計數器和待辦事項列表。 3)優化和最佳實踐包括代碼分割、惰性加載和使用React.memo和useMemo來提高性能。通過這些方法，開發者可以利用React的強大功能來構建動態和響應迅速的用戶界面。

反應：現代前端發展基礎Apr 19, 2025 am 12:23 AM

React是構建現代前端應用的JavaScript庫。 1.它採用組件化和虛擬DOM優化性能。 2.組件使用JSX定義，狀態和屬性管理數據。 3.Hooks簡化生命週期管理。 4.使用ContextAPI管理全局狀態。 5.常見錯誤需調試狀態更新和生命週期。 6.優化技巧包括Memoization、代碼拆分和虛擬滾動。