個人做網(wǎng)站如何賺錢嗎百度客服電話人工服務(wù)熱線電話
目錄
背景屬性設(shè)置
圓角矩形
背景屬性設(shè)置
背景顏色,在style中
background-color:顏色；
背景圖片
background-image:url(……)
?背景圖片的平鋪方式
background-repeat: 平鋪方式
- repeat 平鋪（默認）
- no-repeat 不平鋪
- repeat-x 水平平鋪
- repeat-y 垂直平鋪
背景圖片的位置
?background-position:200px 200px;? ?//x軸 y軸
//也可以用以下方式
? ? ? ? 1.方位名詞：（top，left，right，botton）
? ? ? ? 2.精確單位：坐標(biāo)或者百分比，左上角為原點
? ? ? ? 3.混合單位：同時包含方位名詞和精確單位
背景尺寸
background-size: length | percentage | cover | contain;
- cover背景圖片會完全覆蓋背景區(qū)域，可能會造成圖片未完全顯示
- contain背景圖片會有留白
圓角矩形
?border: 2px green solid; /*加邊框*/
border-radius: 20px;? ?/*設(shè)置圓角弧度*/
border-radius通常也用來畫圓：
當(dāng)border-radius 的值為高度或者寬度的一般，即可畫出圓的效果，如下示例
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? div{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? border: 2px green solid; /*加邊框*/
? ? ? ? ? ? border-radius: 100px;? ?/*也可換成 border-radius: 50%；*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div>?</div>
</html>
當(dāng)然我們也可以對一個矩形的四個角進行單獨設(shè)置
//左上角
border-top-left-radius: 20px;
//右上角
border-top-right-radius: 40px;
//左下角
border-bottom-left-radius: 20px;
//右下角
border-bottom-right-radius: 20px;
上述代碼也可以簡寫為：
border-radius: 20px 40px 20px 20px;? /*按 左上角-右上角-右下角-左下角 的順序