css - 05背景處理
阿新 • • 發佈：2022-04-21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景處理</title> </head> <style> /*背景顏色不能設定尺寸*/ /*1.背景顏色與裁切*/ /*div {*/ /* height: 500px;*/ /* border: dashed 10px black;*/ /* padding: 30px;*/ /* background-color: red;*/ /* !*不含邊框，包括內邊距*!*/ /* background-clip: padding-box;*/ /* !*內容區域*!*/ /* !*background-clip: content-box;*!*/ /* !*包括邊框*!*/ /* !*background-clip: border-box;*!*/ /*}*/ /*2.背景重複與滾動*/ /*article {*/ /* border: 10px dashed black;*/ /* height: 500px;*/ /* overflow: auto;*/ /*}*/ /*div {*/ /* height: 3000px;*/ /* background-image: url("cat.jpg");*/ /* background-repeat: no-repeat;*/ /* background-attachment: fixed;*/ /* !*background-attachment: scroll;*!*/ /*}*/ /*3.盒子陰影使用方法*/ /*div {*/ /* width: 300px;*/ /* height: 300px;*/ /*border: 1px solid #ddd;*/ /* box-shadow: 0 0 5px rgba(100,100,100,.2)*/ /*}*/ /*4.元素背景激變色使用*/ /*div {*/ /* height: 500px;*/ /* width: 500px;*/ /* !*線性漸變*!*/ /* !*background: linear-gradient(-45deg,red,green,blue)*!*/ /* !*background: linear-gradient(to right bottom, red, green, blue)*!*/ /* !*徑向漸變*!*/ /* !*background: radial-gradient(at left bottom ,red, green, blue);*!*/ /*}*/ </style> <body> <!--1.背景顏色與裁切--> <!--<div>--> <!-- content--> <!--</div>--> <!--2.背景重複與滾動--> <!--<article>--> <!-- <div>--> <!-- content--> <!-- </div>--> <!--</article>--> <!--3.盒子陰影使用方法--> <!--<div>--> <!-- content--> <!--</div>--> <!--4.元素背景激變色使用--> <!--<div>--> <!-- content--> <!--</div>--> </body> </html>