使用CSS设置边框和背景
一、設置邊框
1、邊框樣式
| 屬性 | 說明 |
| border-width | 設置邊框的寬度 |
| boder-style | 設置邊框的樣式 |
| border-color | 設置邊框的顏色 |
a、border-width屬性
自定義邊框的寬度時，不能定義為百分比。
b、border-style屬性
以上屬性可以設置一個、二個、三個、四個屬性值，當設置一個值得時候四條邊框都應用該屬性值，當設置兩個的時候時候上下使用第一個屬性值，左右使用第二個屬性值，當設置三個值的時候，第一個值應用在上邊框，第二個應用到左右邊框，第三個屬性值應用到下邊框當設置了四個屬性值，按著順時針的方向一次應用。大部分情況下groove、ridge、inset、outset可以會使用雙色邊框，但是當border-color屬性這設置成black是，兩種顏色都會顯示成黑色。
2、為一條邊應用邊框樣式
boder-top/bottom/right/left-width/style/color 用來設置一條邊框的樣式，可以和通用屬性結合使用。還可以使用border-bottom/top/left/right一次設置一條邊框。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border-width: 10px;
11 border-style: ridge;
12 border-color: red;
13 border-top-style: double;
14 }
15 </style>
16 </head>
17 <body>
18 <div>
19
20 </div>
21 </body>
22 </html>
3、使用border簡寫屬性
可以使用一次來設置border的寬度、樣式、顏色，三個屬性值之間用空格分開。三個屬性之間的順序可以打亂。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border:solid 2px red ;
11 }
12 </style>
13 </head>
14 <body>
15 <div>
16
17 </div>
18 </body>
19 </html>
4、創(chuàng)建圓角邊框
border-top/bottom-left/right-radius 設置一個圓角，一對長度值或者百分比，百分比跟邊框盒子的寬度和高度有關。第一個值是橢圓邊框的水平半徑，第二個值是橢圓的垂直半徑。如果只一個值是圓的半徑，兩個值之間用空格分開。
border -radius 一次設置邊框的四個圓角，一對、兩對、三對、四對長度值或者百分比，水平半徑和垂直半徑之間用/分開。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border:solid 2px red;
11 border-top-left-radius: 20px 10px
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17
18 </div>
19 </body>
20 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border:solid 2px red;
11 border-radius: 20px/10px
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17
18 </div>
19 </body>
20 </html>
一對或者一個屬性值時，四個圓角是一樣的，兩個屬性值時第一個屬性值對應的是左上和右下，第二個對應的是右上和左下，三個屬性值時對應的是左上、（右上、左下）、右下。四個屬性值的時候是順時針方向。
5、圖像邊框
圖片邊框的瀏覽器兼容并不好，很多時候下需要在屬性前面加上瀏覽器廠商前綴。為了提供更好的兼容性，建議按下面的方式使用。
a、border-image-source
必須使用url功能指定圖像來源。
b、border-image-slice屬性
該屬性規(guī)定圖像的上、右、下、左側邊緣的向內(nèi)偏移，圖像被分割為九個區(qū)域：四個角、四條邊以及一個中間區(qū)域。除非使用了關鍵詞 fill，否則中間的圖像部分會被丟棄。如果省略第四個數(shù)值/百分比，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 500px;
9 height: 400px;
10 background: red;
11 /*border-image-source:url(1.png);
12 border-image-slice:89;
13 border-image- 89px;
14 border-image-repeat: stretch;
15 border-image-outset: 10px;*/
16 border-image:url(1.png) 89 30 89 30 fill/89px repeat
17 }
18 </style>
19 </head>
20 <body>
21 <div>
22
23 </div>
24 </body>
25 </html>
切割的圖：
c、border-image-outset
當不設置這個屬性時，邊框會占據(jù)內(nèi)容區(qū)域。需要設置的時候可以在邊框的寬度后面加"/"設置屬性值.
d、border-repeat
e、border-image
可以一次設置上面這些屬性。border-image:souce slice/width/outset repeat
二、設置元素的背景
| 屬性 | 說明 |
| background-color | 設置元素的背景顏色，總是顯示在元素的背景圖片的下面 |
| background-image | 設置元素的背景圖片，可以指定多個值，最后面的圖片繪制在前面的圖片上面 |
| background-repeat | 設置圖片的重復方式 |
| background-size | 設置背景圖片的尺寸 |
| background-position | 設置背景圖片的位置 |
| background-attachment | 設置背景圖片是否固定或隨頁面一起滾動 |
| background-clip | 設置背景圖片的裁剪方式 |
| background-origin | 設置背景圖片繪制的起始位置 |
| background | 設置上面屬性的簡寫 |
a、background-color
設置元素的背景顏色，屬性值是顏色。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height: 100px;
10 background-color: red;
11 }
12 </style>
13 </head>
14 <body>
15 <div>
16 </div>
17 </body>
18 </html>
b、background-image
通過url功能添加背景圖片。同時設置背景色和背景圖片，背景圖片會覆蓋背景色。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height: 100px;
10 background-color: red;
11 background-image: url(1.png);
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17 </div>
18 </body>
19 </html>
c、background-repeat
設置背景圖片的重復方式。屬性值有：
d、background-size
設置背景圖片的大小，屬性值可以是長度值、百分比（跟圖片的高度和寬度有關系），還可以是預定義值；
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 100px;
10 background-color: red;
11 background-image: url(1.png);
12 background-size:100px auto;
13 background-repeat: no-repeat;
14 }
15 </style>
16 </head>
17 <body>
18 <div>
19 </div>
20 </body>
21 </html>
e、background-position
設置背景圖片的位置。圖像不平鋪的時候使用的最多。
使用預定值得時候第一個垂直位置，第二個是水平位置。當設置了background-size為contain或者cover時，使用position-position會出現(xiàn)特殊情況。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 100px;
10 background-color: red;
11 background-image: url(1.png);
12 background-size:50px auto;
13 background-repeat: no-repeat;
14 background-position: top center;
15 }
16 </style>
17 </head>
18 <body>
19 <div>
20 </div>
21 </body>
22 </html>
f、background-attachment
設置元素背景圖片的輔著方式。
g、background-clip和background-origin
background-origin決定背景圖片的繪制區(qū)域，background-cilp設置背景圖片的裁剪區(qū)域。兩個屬性值都如下所示。
其中background-origin設置成border-box時，邊框會繪制在背景圖片之上。background-clip裁剪區(qū)域之外的背景不可見。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 100px;
10 border: 10px double red;
11 background-image: url(1.png);
12 background-size:50px auto;
13 background-repeat: no-repeat;
14 background-position: top center;
15 background-origin: border-box;
16 }
17 </style>
18 </head>
19 <body>
20 <div>
21 </div>
22 </body>
23 </html>
將background-origin設置成border-box;
將background-origin設置成border-box;background-clip設置成content-box;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 100px;
10 border: 10px double red;
11 background-image: url(1.png);
12 background-size:50px auto;
13 background-repeat: no-repeat;
14 background-position: top center;
15 background-origin: border-box;
16 background-clip: content-box;
17 }
18 </style>
19 </head>
20 <body>
21 <div>
22 </div>
23 </body>
24 </html>
h、background
一次設置背景相關的多個屬性值。
background:background-color background-position background-size background-repeat backgropund-origin background-cilp background-attachment background-image;對于省略的值會使用默認值。可以給一個元素設置多個背景圖片，但是前面的背景圖片需要是透明的，同時背景圖片和背景色可以同時存在。如
#product-overview {
background:linear-gradient(to top,rgba(80,68,18,0.6),transparent),
url("images/freedom.jpg") left 10% bottom 20%/cover no-repeat border-box,
#ff1b68;
}
背景圖片和背景色之間用逗號分開，背景圖片會遮擋住背景色，只有背景圖片加載失敗的時候，背景色才可見。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 100px;
10 border: 10px double red;
11 background: blue;
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17 </div>
18 </body>
19 </html>
三、創(chuàng)建盒子陰影
1、box-shadow屬性
屬性值:
h-shadow用來設置水平偏移量，正值代表向右偏移，負值代表向左偏移。v-shadow用來設置水平偏移量，正值代表向下偏移，負值代表向上偏移。spread用來設置陰影的延伸半徑，值可以是正的，也可以是負的。升值向各個方向延伸，負值向內(nèi)收縮，0px的時候不會延伸。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 100px;
10 border: 10px double red;
11 box-shadow:5px 5px 5px 0px yellow,5px 5px 5px 10px pink inset;
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17 </div>
18 </body>
19 </html>
四、應用輪廓
輪廓對元素來說是可選的，輪廓最有用的地方在于短時間抓住用戶的注意力。輪廓繪制在邊框的外面。邊框和輪廓的最大區(qū)別在于輪廓不屬于頁面，應用輪廓不需要調(diào)整布局。
| 屬性 | 說明 | 值 |
| outline-color | 設置外圍輪廓的顏色 | 顏色 |
| outline-offset | 設置輪廓距離元素邊框的距離 | 長度 |
| outline-style | 設置輪廓的樣式 | 和border-style屬性的值一樣 |
| outline-width | 設置輪廓的寬度 | thin、medium、thick、長度 |
| outline | 上面屬性的簡寫 | 顏色 樣式 寬度（outline-offset需要單獨設置） |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 p{
8 width: 200px;
9 height: 100px;
10 border: 2px solid red;
11 }
12 p:hover{
13 outline:blue 3px solid ;
14 }
15 </style>
16 </head>
17 <body>
19 <p>元素的輪廓</p>
20 <p>元素的輪廓</p>
21 <p>元素的輪廓</p>
22 <p>元素的輪廓</p>
23 </body>
24 </html>
鼠標懸停在對應的元素上，顯示對應元素的輪廓。
五、圖片
在頁面中可以使用img標簽嵌入圖片，可以只用width、height、title、alt屬性對圖片的顯示進行設置。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>image</title> 7 </head> 8 <body> 9 <span> <img src="./VIM.png" alt="vim"></span> 10 </body> 11 </html>
a.我們對圖片的大小進行設置時，如果是采用百分比，圖片是相對于最近的block祖先元素來計算的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>image</title>
<style>
div{
width: 300px;height:300px ;
}
a{
width: 100px;
/*display: inline-block;*/
}
img{
width:100%;
}
</style>
</head>
<body>
<div>
<a> <img src="./VIM.png" alt="vim"></a>
</div>
</body>
</html>
將a標簽設置成inline-block;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>image</title>
7 <style>
8 div{
9 width: 300px;height:300px ;
10 }
11 a{
12 width: 100px;
13 display: inline-block;
14 }
15 img{
16 width:100%;
17 }
18 </style>
19 </head>
20 <body>
21 <div>
22 <a> <img src="./VIM.png" alt="vim"></a>
23 </div>
24
25 </body>
26 </html>
b、在div元素中包含img圖片時，圖片和div下變局間會有一個空白，導致這個的原因是img標簽的display為inline-block.可以將圖片設置為block或者vertical-align: bottom;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>image</title>
7 <style>
8 div {
9 width: 30%;
10 background: #2A7DB5;
11 }
12 div img{
13 width: 100%;
14 }
15 </style>
16 </head>
17 <body>
18 <div>
19 <img src="./VIM.png" alt="">
20 </div>
21
22 </body>
23 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>image</title>
7 <style>
8 div {
9 width: 30%;
10 background: #2A7DB5;
11 }
12 div img{
13 width: 100%;
14 vertical-align: bottom;
15 }
16 </style>
17 </head>
18 <body>
19 <div>
20 <img src="./VIM.png" alt="">
21 </div>
22
23 </body>
c、img標簽和背景圖片的區(qū)別：背景圖片不在文檔流中。
六、漸變色
漸變色可以用來代替圖片，我們可以在需要使用圖片的地方使用漸變色來代替，如設置背景圖片。漸變可以分為兩種，一種是linear-gradient(),另一種是radial-gradient().
a.linear-gradient()
這個css函數(shù)用來設置線性漸變。
語法：
linear-gradient(
[ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
---------------------------------/ ----------------------------/
Definition of the gradient line List of color stops
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
例子：
/* 漸變軸為45度，從藍色漸變到紅色 */ linear-gradient(45deg, blue, red); /* 從右下到左上、從藍色漸變到紅色 */ linear-gradient(to left top, blue, red); /* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束 */ linear-gradient(0deg, blue, green 40%, red);
漸變漸變線由包含漸變圖形的容器的中心點和一個角度來定義的。to top, to bottom, to left 和 to right這些值會被轉換成角度0度、180度、270度和90度。其余值會被轉換為一個以向頂部中央方向為起點順時針旋轉的角度。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>image</title>
7 <style>
8 div {
9 display: inline-block;
10 background-image: linear-gradient(90deg, red 30%,green 10%,blue 60%);
11 }
12 </style>
13 </head>
14 <body>
15 <div>
16 使用線性漸變色
17 </div>
18
19 </body>
20 </html>
b、radial-gradient()
radial-gradient() 函數(shù)創(chuàng)建一個徑向漸變。語法：
1 Formal grammar: radial-gradient( [ circle（圓） || <length>（漸變的半徑） ] [ at <position> ]?
（設置漸變開始位置默認為默認為中心點。）, 2 | [ ellipse（橢圓，默認值） || [<length> | <percentage> ]{2} 需要設置兩個便半徑] [ at <position> ]? , 3 | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , 4 | at <position> , 5 <color-stop> [ , <color-stop> ]+ ) 6 ------------------------------------------------------------------------------/--------------------------------/ 7 8 // Definition of the contour, size and position of the ending shape List of color stops 9 where 10 <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side 11 and 12 <color-stop> = <color> [ <percentage> | <length> ]?
例子：
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); background-image: radial-gradient(ellipse farthest-corner at 20% 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>image</title>
7 <style>
8 div {
9 width: 400px;
10 height: 400px;
11 background-image: radial-gradient(ellipse 100px 200px,red,green,black );
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17
18 </div>
19
20 </body>
21 </html>
如果設置的漸變半徑小于元素的長和寬，使用最外層的顏色填充整個元素。
七、濾鏡
filter屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。語法：
img {
filter: grayscale(0.5) blur(10px);
}
更多的濾鏡函數(shù)見https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter；
使用高斯模糊函數(shù)blur;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>image</title>
<style>
div {
width: 40px;
height: 40px;
background:red;
filter: blur(10px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的使用CSS设置边框和背景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java convert函数_自己实现
- 下一篇： java集合概念