CSS3----新增UI樣式
阿新 • • 發佈：2021-07-14
圓角
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; border: 1px solid; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius:10px 20px 30px 40px; } </style> </head> <body> <div class="test"> </div> </body> </html>
border-radius用法
圓角風車
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">*{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } /**/ .wrap{ width: 300px; height: 300px; /* border: 1px solid; */ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 2s; } .wrap > div{ margin: 10px; width: 130px; height: 130px; border: 1px solid; background: #BBFFAA; float: left; box-sizing: border-box; } .wrap > div:nth-child(1),.wrap > div:nth-child(4){ border-radius: 0 60%; } .wrap > div:nth-child(2),.wrap > div:nth-child(3){ border-radius: 60% 0; } .wrap:hover{ transform: rotate(120deg); } </style> </head> <body> <div class="wrap"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
圓角風車案例注意transform：rotate（120deg）和transition：2s；用法
對話
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } .test{ width: 600px; height: 400px; border: 1px solid; border-radius: 50%; text-align: center; font: 32px helvetica; line-height: 400px; position: relative; } .test:before{ position: absolute; display: block; content: ""; width: 40px; height: 40px; border: 1px solid; right: -80px; bottom: -80px; border-radius: 50%; } .test:after{ position: absolute; display: block; content: ""; width: 80px; height: 80px; border: 1px solid; right: -20px; bottom: -20px; border-radius: 50%; } </style> </head> <body> <div class="test">大家好歡迎入坑</div> </body> </html>
對話練習
CSS3擴充套件--滾動條
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; /* border: 1px solid; */ /* 禁止系統預設滾動條 */ overflow: hidden; } body{ height: 100%; /* border: 1px solid #BBFFAA; */ /* 禁止系統預設滾動條 */ overflow: hidden; } .wrap{ height: 100%; border: 1px solid #BBFFAA; overflow: auto; } </style> </head> <body> <div class="wrap"> <div class="test" style="height: 3000px;"></div> </div> </body> </html>
禁止系統預設滾動條在html中和body中使用overflow：hidden；
使用絕對定位模擬固定定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* .test{ width: 200px; height: 200px; background: #BBFFAA; position: absolute; left: 0; top: 0; } */ html{ height: 100%; overflow: hidden; } body{ height: 100%; overflow: hidden; } .wrap{ height: 100%; overflow: auto; } .gg{ width: 200px; height: 200px; background: #BBFFAA; position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="wrap"> <div class="gg"> </div> <div class="test" style="height: 3000px;"> </div> </div> <!-- 初始包含塊：一個視窗大小的矩形 --> </body> </html>
初始包含塊：一個視窗大小的矩形
邊框圖片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border: 30px solid; /*border-image-source屬性定義使用一張圖片代替邊框樣式 屬性值 none 預設值 使用border-style定義的樣式 */ border-image-source:url(img/border-image.png) ; /* border-image-slice屬性通過規範border-image-source的圖片明確分 割為9個區域，四個角，四邊以及中心區域 */ border-image-slice: 33.333333% fill; /* border-image-repeat定義圖片如何填充邊框 屬性值 stretch 拉伸 repeat,round 平鋪 */ border-image-repeat: round; /* border-image-width 定義邊框寬度 屬性值 預設值 1 屬性值根據border的數值決定 */ border-image-width: 10px; /* border-image-outset 定義邊框影象可超出邊框盒的大小 屬性值 預設值 0 正值：可超出邊框盒的大小 */ border-image-outset: 10px; } </style> </head> <body> <div class="test"></div> </body> </html>
background-image-source屬性定義使用一張圖片代替邊框樣式
預設值 none 使用border-style定義的樣式
border-image-slice屬性通過規範border-image-source的圖片明確分
割為9個區域，四個角，四邊以及中心區域
border-image-repeat定義圖片如何填充邊框
屬性值 stretch 拉伸
repeat,round 平鋪
border-image-width 定義邊框寬度
屬性值 預設值 1
屬性值根據border的數值決定
border-image-outset 定義邊框影象可超出邊框盒的大小
屬性值 預設值 0
正值：可超出邊框盒的大小
CSS2背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 100px; height: 100px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #BBFFAA; border: 1px solid; background-image:url(img/tg.png); background-position: 10% 10%; } /* background-image屬性用於為一個元素設定一個或多個背景，以堆疊的方式進行 注意：background-color在image之下，邊框和內容會在image之上 屬性值： 預設值 none background-position指定背景位置的初始位置 預設值 0% 0% 百分比：參照尺寸為背景圖片定位區域的大小減去背景圖片的大小 */ </style> </head> <body> <div class="test"></div> </body> </html>
background-image屬性用於為一個元素設定一個或多個背景，以堆疊方式進行
注意：background-color在image之下，邊框和內容會在image之上
預設值 none
background-position指定背景位置初始位置
預設值 0% 0%
百分比：參照尺寸為背景圖片定位區域的大小減去背景圖片的大小、
CSS2背景background-attachmen
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 400px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* background-color: #BBFFAA; */ border: 1px solid; background-image:url(img/tg.png); background-repeat: no-repeat; /* background-position: 10% 10%; */ background-attachment: fixed;/*平鋪到視口*/ overflow: auto; } </style> </head> <body> <div class="test"> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br /> </div> </body> </html>
background-attachment屬於腦癱行為了解就好
屬性值 fixed 平鋪到視口
CSS3背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ /*預設背景圖片是從padding box開始*/ /* 從border box結束*/ width: 300px; height: 300px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #BBFFAA; border: 30px solid rgba(0,0,0,.2); /*以下css3包含*/ background-image:url(img/tg.png); background-repeat: no-repeat; /* background-origin 設定背景渲染的起始位置 屬性值 border-box 背景影象向對於邊框盒定位 預設值 padding-box 背景影象相對於內邊距框定位 content-box 背景相對於內容框定位 */ background-origin: content-box; background-size: 100% 100%; } </style> </head> <body> <div class="test"> </div> </body> </html>
background-origin 設定背景渲染的起始位置
屬性值 border-box 背景影象對於邊框盒定位
預設值 padding-box 背景影象相對於內邊距框定位
content-box 背景相對於內容框定位
clip
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 300px; height: 300px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #BBFFAA; border: 30px solid rgba(0,0,0,.2); padding: 50px; background-image:url(img/tg.png); background-repeat: repeat; background-origin: padding-box; /*按文字剪下背景*/ -webkit-background-clip: text; font:bold 80px/300px "微軟雅黑"; text-align: center; color: rgba(0,0,0,.3); } </style> </head> <body> <div class="test"> 蕾蕾比 </div> </body> </html>
-webkit-background-clip:text
按文字剪下背景：注意文字透明度
background簡寫屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ background-image: none; background-position: 0% 0%; background-size: auto auto; background-repeat: repeat; background-origin: padding-box; background-clip: border-box; background-attachment: scroll; background-color: transparent;/*透明*/ } </style> </head> <body> <div></div> </body> </html>