css的背景圖怎麼加邊框

css背景圖加上邊框的方法：先建立一個HTML範例檔案；然後透過「background-image」引入一張背景圖；最後透過border屬性設定邊框即可。

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

背景樣式

常用的背景樣式

• 背景色：background-color

background-color: gray;
background-color: #808080;
background-color: rgb(128,128,128);

• 背景圖片：background -image

body{background-image: url("images/bg.jpg");}

• 背景圖片重複：background-repeat

##說明repeat預設。背景影像將在垂直方向和水平方向重複repeat-x#背景影像將在水平方向重複##repeat -yno-repeat#inherit

值
背景影像將在垂直方向重複
背景影像將只顯示一次
規定應該從父元素繼承background-repeat屬性的設定

背景圖片定位：background-position

• background-position屬性值：

①使用關鍵字：

background-position:center left

②使用百分數值：

background-position: 50% 50%

③使用長度值：

background-position:300px 100px

<pre class="brush:php;toolbar:false">/*背景样式综合使用*/ background: #00ff00 url(image/bg.jpg)  no-repeat center;</pre>

#背景圖片固定：background- attachment

• background-attachment屬性設定背景圖像是否固定或隨著頁面的其餘部分滾動。

scroll：預設值。背景圖像會隨著頁面的滾動而移動。

1. fixed：當頁面的其餘部分滾動時，背景圖像不會移動。
【建議：
2. css影片教學
   】
   
background-size

規定背景圖片的尺寸

• 語法：
background-size: length| percentage| cover| contain;

#值##描述length以浮點數和單位組成的長度值來設定背景影像的寬度和高度，如果只設定第一個值，則第二個值會被設定為"auto"percentage#以父元素的百分比來設定背景圖像的寬度和高度，如果只設定第一個值，則第二個值會被設定為"auto"cover#保持背景影像本身寬高比例，將圖片縮放到剛好完全覆寫所定義背景的區域contain將保持背景圖片本身寬高比例，將圖片縮放到寬度或高度剛好適應所定義背景的區域

cover和contain

nbsp;html>


    <meta>
    <title>背景</title>
    <style>
        p{width: 700px;height: 400px;border: 2px solid plum;background-repeat: no-repeat;
            background-image: url(img/design.jpg);background-size: cover;}
    </style>


    <p>图片尺寸</p>

background-origin

規定背景圖片的定位區域（ background-position的參考位置）

語法：
• background-origin: border-box | padding-box | content-box;
• ##預設是padding-box

繪製區域（決定背景在哪些區域顯示）。

語法：background-clip: border-box| padding-box| content-box;

值

##描述

border-box從邊框區域向外裁切背景padding-box從補白區域向外裁切背景content-box#從內容區域向外裁切背景#

background-clip与background-origin

• background-clip：border| padding| content  指定背景在哪些区域可以显示，但与背景开始绘制的位置无关。背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分。
• background-origin：padding| border| content  指定背景从哪个区域(边框、补白或内容)开始绘制。可以用此属性在边框上绘制背景，但边框上的背景显不显示出来就要由background-clip来决定了。

nbsp;html>


    <meta> 
    <style>
        #example1 {
            width: 800px;
            height: 450px;
            border: 20px dotted black;
            padding: 50px;
            background-image: url(img/girl.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;           
            background-clip: padding-box;/*padding-box以外的都要剪辑掉*/
            background-origin: border-box;/*从border-box开始进行剪辑*/
        }
    </style>s


    <p></p>

边框样式

常用的边框样式

border

• 设置边框宽度：border-width 宽度值。示例： border-width:1px;

• 设置边框颜色：border-color 颜色。示例：border-color:#cccccc;

• 设置边框样式：border-style 样式关键字。示例：border-style: solid;

边框线类型

• 边框复合样式：border: width / style / color 示例：border: 3px dotted#ff9900

border-radius

圆角边框——border-radius 属性。

• 语法 border-radius: 1-4 length | %;

• border-radius属性可包含两个参数值，第一个值表示圆角的水平半径，第二个值表示圆角的垂直半径，两个参数值通过斜线分隔。如果仅包含一个参数值，表示两个值相同，即1/4圆角。

单位	描述
length	定义圆角的形状。（圆角半径）
%	比百分比定义圆角的形状

border-radius

如果要绘制的圆角边框4个角的半径各不相同时，需按左上角、右上角、右下角、左下角的顺序设置每个方向圆角半径的值。

• border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius（绘制圆角边框的四个角的半径各不相同时，按照上述的顺序）

• 如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

p{
    border-top-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 30px;
    /*上述的四句代码等同于：border-radius:0px 10px 20px 30px;*/
}

border-image

图像边框——border-image 属性

• 可以让元素的长度或宽度处于随时变化的边框统一使用一个图像文件进行绘制。
• 语法：border-image: url(图像文件的路径) A B C D

ABCD四个参数表示浏览器自动把图像分隔时的上边距、右边距、下边距以及左边距。

border-image 属性是一个简写属性，用于设置以下属性：

值	描述
border-image-source	定义用在边框的图片的路径
border-image-slice	定义如何裁切背景图像
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

陰影

在框中加入一個或多個陰影－box-shadow 屬性

語法：box-shadow: h-shadow v-shadow blur spread color inset;

#

以上是css的背景圖怎麼加邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！