零基础跟我学前端之css3基础
css3基礎(chǔ)
1、本章目標(biāo)
掌握CSS3設(shè)置邊框、背景、文本效果
理解并會(huì)使用CSS3自定義字體
2、CSS3邊框
- border-radius 用于創(chuàng)建圓角
- border-image 使用圖片創(chuàng)建邊框
- box-shadow 用來(lái)添加陰影
border-radius屬性
四個(gè)值 ：左上角，右上角，右下角，左下角
三個(gè)值：左上角, 右上角和左下角，右下角
兩個(gè)值：左上角與右下角，右上角與左下角
一個(gè)值 ：四個(gè)圓角值相同
border-radius 8個(gè)值順序：
.e{border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;}p {width: 100%;height: 50%;background: lightgreen;border-radius: 100% 50%/ 0 100%; }[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-dvIduY4W-1629980842687)(/assetis/image-20210325000539132.png)]
border-image屬性
| border-image-source | 邊框圖片的路徑 |
| border-image-slice | 圖片邊框向內(nèi)偏移 num / % / fill |
| border-image-width | 圖片邊框的寬度 |
| border-image-outset | 邊框圖像區(qū)域超出邊框的量 |
| border-image-repeat | 圖像是否應(yīng)該平鋪(repeat)、鋪滿(mǎn)(round)或拉伸(stretch)。 |
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-e8Cqr2pO-1629980842691)(/assetis/image-20210325002321790.png)]
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box {margin: 50px auto;width: 300px;height: 300px;border: 1px solid;background-color: rgb(252, 225, 225);/* border-image-source 邊框圖片的路徑 */border-image-source: url(./img/border.png);/* border-image-slice 圖片邊框向內(nèi)偏移 num / % / fill */border-image-slice: 30;/* border-image-width 圖片邊框的寬度*/border-image-width: 30px;/* border-image-outset 邊框圖像區(qū)域超出邊框的量*/border-image-outset: 0px; ;/* border-image-repeat 圖像是否應(yīng)該平鋪(repeat)、鋪滿(mǎn)(round)或拉伸(stretch)*/border-image-repeat: round;border-image: url(/i/border_image_button.png) 0 14 0 14 stretch}</style> </head><body><div class="box"></div> </body></html>3、box-shadow屬性
| h-shadow | 必需，水平陰影的位置，允許負(fù)值 |
| v-shadow | 必需，垂直陰影的位置，允許負(fù)值 |
| blur | 可選，模糊距離 |
| spread | 可選，陰影的尺寸 外延值 |
| color | 可選，陰影的顏色 |
| inset | 可選，將外部陰影（outset）改為內(nèi)部陰影 |
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-MfXxBY34-1629980842693)(/assetis/image-20210325003241903.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin: 50px auto;border: 1px solid #999;/* h-shadow 必需，水平陰影的位置，允許負(fù)值v-shadow 必需，垂直陰影的位置，允許負(fù)值blur 可選，模糊距離spread 可選，陰影的尺寸 外延值color 可選，陰影的顏色inset 可選，將外部陰影（outset）改為內(nèi)部陰影 */box-shadow: 10px 20px 5px 20px rgb(173, 156, 134) ;}</style> </head> <body><div></div> </body> </html>4、CSS3背景
background-size 規(guī)定背景圖片的尺寸
background-origin 規(guī)定背景圖片的定位區(qū)域，即以哪個(gè)位置為參考
background-clip 規(guī)定背景的繪制區(qū)域
background-size屬性
| length（單位：像素） | 設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為"auto(自動(dòng))" |
| percentage（百分比） | 以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為"auto(自動(dòng))" |
| cover | 把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。 |
| contain | 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 |
語(yǔ)法：
//background-size:100px; //background-size:100%; //background-size:cover; background-size:contain;background-origin/clip屬性:
background-origin 屬性規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位
background-clip 屬性規(guī)定背景的繪制區(qū)域
| padding-box | 背景圖像相對(duì)于內(nèi)邊距框來(lái)定位 | 背景被裁剪到內(nèi)邊距框 |
| border-box | 背景圖像相對(duì)于邊框盒來(lái)定位 | 背景被裁剪到邊框盒 |
| content-box | 背景圖像相對(duì)于內(nèi)容框來(lái)定位 | 背景被裁剪到內(nèi)容框 |
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-MHGji9hb-1629980842696)(/assetis/image-20210325004838901.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;margin: 50px auto;border:30px solid rgba(0, 0, 0, .5);background: url(./img/bj.jpg) no-repeat;background-size: 200px;padding: 50px;background-origin:content-box;}</style> </head> <body><div></div> </body> </html>5、CSS3漸變
線(xiàn)性漸變—Linear Gradients
語(yǔ)法：background: linear-gradient(direction, color-stop1, color-stop2, …);
徑向漸變—Radial Gradients
語(yǔ)法：background: radial-gradient(center, shape size, start-color, …, last-color);
注意：漸變的值一定要找ui拿
https://www.runoob.com/css3/css3-gradients.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;/* background-image: linear-gradient(90deg,pink,yellow); *//* background-image: linear-gradient(to left,pink,yellow); *//* background-image: linear-gradient(to left, pink 70%, yellow); *//* background-image: linear-gradient(to left, pink 70%, yellow); *//* background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, .5)); */background-image: radial-gradient(red 5%, yellow 15%, green 60%);}</style> </head><body><div></div> </body></html>6、CSS3文本效果
text-shadow
向文本添加陰影：h-shadow v-shadow blur color
h-shadow：水平方向偏移量
v-shadow：垂直方向偏移量
blur: 模糊度
color:顏色
| v-shadow | 必需，垂直陰影的位置，允許負(fù)值 |
| blur | 可選，模糊距離 |
| color | 可選，陰影的顏色 |
?
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-S8wJwwQY-1629980842698)(/assetis/image-20210325011918812.png)]
7、text-overflow 屬性
超出部分顯示省略號(hào)
white-space:nowrap 文本不會(huì)換行，在同一行繼續(xù)
overflow:hidden 溢出隱藏
text-overflow:ellipsis 用省略號(hào)來(lái)代表被修剪的文本
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-BOwP5J7T-1629980842701)(/assetis/image-20210325012737102.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 50px;border: 3px solid #999;white-space: normal;overflow: hidden;text-overflow: ellipsis;}</style> </head> <body><div>jdjdjdjjddddddddddddddddddddddddddddddddddddddddddddddd</div> </body> </html>8、CSS3字體
@font-face {font-family: 必需。規(guī)定字體的名稱(chēng)src: 必需。定義字體文件的 URL}[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-tFYNixpQ-1629980842702)(/assetis/image-20210325013634762.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* @font-face {font-family: 必需。規(guī)定字體的名稱(chēng)src: 必需。定義字體文件的 URL} */@font-face {font-family: 'my_font';src:url(./fonts/shimesone_personal-webfont.eot);src:url(./fonts/shimesone_personal-webfont.svg);src:url(./fonts/shimesone_personal-webfont.ttf);src:url(./fonts/shimesone_personal-webfont.woff);}h1{font-family: 'my_font';}</style> </head> <body><h1>hello every body</h1> </body> </html>} */
@font-face {
font-family: ‘my_font’;
src:url(./fonts/shimesone_personal-webfont.eot);
src:url(./fonts/shimesone_personal-webfont.svg);
src:url(./fonts/shimesone_personal-webfont.ttf);
src:url(./fonts/shimesone_personal-webfont.woff);
}
hello every body
```總結(jié)
以上是生活随笔為你收集整理的零基础跟我学前端之css3基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Spring Boot 入门与实战笔记
- 下一篇： 零基础学前端之css3高级特效