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

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中文網其他相關文章！