零基础跟我学前端之css3基础
css3基礎
1、本章目標
掌握CSS3設置邊框、背景、文本效果
理解并會使用CSS3自定義字體
2、CSS3邊框
- border-radius 用于創建圓角
- border-image 使用圖片創建邊框
- box-shadow 用來添加陰影
border-radius屬性
四個值 ：左上角，右上角，右下角，左下角
三個值：左上角, 右上角和左下角，右下角
兩個值：左上角與右下角，右上角與左下角
一個值 ：四個圓角值相同
border-radius 8個值順序：
.e{border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;}p {width: 100%;height: 50%;background: lightgreen;border-radius: 100% 50%/ 0 100%; }[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dvIduY4W-1629980842687)(/assetis/image-20210325000539132.png)]
border-image屬性
| border-image-source | 邊框圖片的路徑 |
| border-image-slice | 圖片邊框向內偏移 num / % / fill |
| border-image-width | 圖片邊框的寬度 |
| border-image-outset | 邊框圖像區域超出邊框的量 |
| border-image-repeat | 圖像是否應該平鋪(repeat)、鋪滿(round)或拉伸(stretch)。 |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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 圖片邊框向內偏移 num / % / fill */border-image-slice: 30;/* border-image-width 圖片邊框的寬度*/border-image-width: 30px;/* border-image-outset 邊框圖像區域超出邊框的量*/border-image-outset: 0px; ;/* border-image-repeat 圖像是否應該平鋪(repeat)、鋪滿(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 | 必需，水平陰影的位置，允許負值 |
| v-shadow | 必需，垂直陰影的位置，允許負值 |
| blur | 可選，模糊距離 |
| spread | 可選，陰影的尺寸 外延值 |
| color | 可選，陰影的顏色 |
| inset | 可選，將外部陰影（outset）改為內部陰影 |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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 必需，水平陰影的位置，允許負值v-shadow 必需，垂直陰影的位置，允許負值blur 可選，模糊距離spread 可選，陰影的尺寸 外延值color 可選，陰影的顏色inset 可選，將外部陰影（outset）改為內部陰影 */box-shadow: 10px 20px 5px 20px rgb(173, 156, 134) ;}</style> </head> <body><div></div> </body> </html>4、CSS3背景
background-size 規定背景圖片的尺寸
background-origin 規定背景圖片的定位區域，即以哪個位置為參考
background-clip 規定背景的繪制區域
background-size屬性
| length（單位：像素） | 設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)" |
| percentage（百分比） | 以父元素的百分比來設置背景圖像的寬度和高度。。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)" |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 |
語法：
//background-size:100px; //background-size:100%; //background-size:cover; background-size:contain;background-origin/clip屬性:
background-origin 屬性規定 background-position 屬性相對于什么位置來定位
background-clip 屬性規定背景的繪制區域
| padding-box | 背景圖像相對于內邊距框來定位 | 背景被裁剪到內邊距框 |
| border-box | 背景圖像相對于邊框盒來定位 | 背景被裁剪到邊框盒 |
| content-box | 背景圖像相對于內容框來定位 | 背景被裁剪到內容框 |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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漸變
線性漸變—Linear Gradients
語法：background: linear-gradient(direction, color-stop1, color-stop2, …);
徑向漸變—Radial Gradients
語法：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 | 必需，垂直陰影的位置，允許負值 |
| blur | 可選，模糊距離 |
| color | 可選，陰影的顏色 |
?
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-S8wJwwQY-1629980842698)(/assetis/image-20210325011918812.png)]
7、text-overflow 屬性
超出部分顯示省略號
white-space:nowrap 文本不會換行，在同一行繼續
overflow:hidden 溢出隱藏
text-overflow:ellipsis 用省略號來代表被修剪的文本
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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: 必需。規定字體的名稱src: 必需。定義字體文件的 URL}[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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: 必需。規定字體的名稱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
```總結
以上是生活随笔為你收集整理的零基础跟我学前端之css3基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot 入门与实战笔记
- 下一篇： 零基础学前端之css3高级特效