欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css3將圖像設(shè)置為元素周圍邊框的方法

這篇文章給大家分享的是有關(guān)css3將圖像設(shè)置為元素周圍邊框的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為臨高企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，臨高網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

在網(wǎng)頁設(shè)計(jì)過程中，使用css3圖像邊框?qū)傩钥梢源蟠蟮奶嵘W(wǎng)頁整體美觀效果，以及豐富頁面內(nèi)容。那么css3中的圖像邊框?qū)傩砸簿褪莃order-image 屬性。

css3將圖像設(shè)置為元素周圍邊框的方法

推薦學(xué)習(xí)：《CSS3教程》

下面我們就通過具體的代碼示例，給大家介紹css3中border-image 屬性用法。

也就是將圖像指定為元素周圍的邊框。

代碼如下：

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        #borderimg1 {
            width: 600px;
            border: 15px solid transparent;
            padding: 10px;
            -webkit-border-image: url("/test/img/19.png") 30 round;
            border-image: url("/test/img/19.png")  60 round;
        }
        #borderimg2 {
            width: 600px;
            border: 15px solid transparent;
            padding: 10px;
            -webkit-border-image: url("/test/img/19.png")  30 stretch;
        }
    </style>

</head>
<body>
<p>border-image 邊框圖像屬性,將圖片規(guī)定為包圍 div 元素的邊框：</p>
<p id="borderimg1">這里圖像的中間部分被重復(fù)以創(chuàng)建邊界。</p>
<p id="borderimg2">這里圖像的中間部分被拉伸以創(chuàng)建邊界。</p>
</body>
</html>

這里原始的圖片如下：

css3將圖像設(shè)置為元素周圍邊框的方法

將此圖像按照要求指定為元素周圍的邊框，效果如下：

css3將圖像設(shè)置為元素周圍邊框的方法

border-image屬性可以允許你將圖片或CSS漸變形狀作為一個(gè)元素的邊框。

border-image 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置以下屬性：

border-image-source /*用于指定要用于繪制邊框的圖像的位置*/
border-image-slice /*圖像邊界向內(nèi)偏移*/
border-image-width /*圖像邊界的寬度*/
border-image-outset /*用于指定在邊框外部繪制 border-image-area 的量*/
border-image-repeat /*用于設(shè)置圖像邊界是否應(yīng)重復(fù)（repeat）、拉伸（stretch）或鋪滿（round）。*/

感謝各位的閱讀！關(guān)于css3將圖像設(shè)置為元素周圍邊框的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱：css3將圖像設(shè)置為元素周圍邊框的方法
瀏覽地址：http://chinadenli.net/article20/pgjcco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站建設(shè)、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、服務(wù)器托管、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化