零基础跟我学前端之css3基础
Posted tea_year
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础跟我学前端之css3基础相关的知识，希望对你有一定的参考价值。
css3基础
1、本章目标
掌握CSS3设置边框、背景、文本效果
理解并会使用CSS3自定义字体
2、CSS3边框
- border-radius 用于创建圆角
- border-image 使用图片创建边框
- box-shadow 用来添加阴影
border-radius属性
四个值 ：左上角，右上角，右下角，左下角
三个值：左上角, 右上角和左下角，右下角
两个值：左上角与右下角，右上角与左下角
一个值 ：四个圆角值相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style>
div{
width: 400px;
height: 200px;
margin: 30px auto;
background-color: rgb(241, 194, 194);
text-align: center;
line-height: 200px;
}
.a{
border-radius: 20px;
}
.b{
border-radius: 10px 50px;
}
.c{
border-radius: 10px 50px 0px;
}
.d{
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<!-- border-radius属性
四个值 ：左上角，右上角，右下角，左下角
三个值：左上角, 右上角和左下角，右下角
两个值：左上角与右下角，右上角与左下角 对角线
一个值 ：四个圆角值相同 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</body>
</html>
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 属性规定背景的绘制区域
| 值 | background-origin值说明 | 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:颜色
| h-shadow | 必需，水平阴影的位置，允许负值 |
|---|---|
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
font-size: 80px;
font-weight: 900;
text-shadow: 11px 9px 5px #675;
}
</style>
</head>
<body>
<h1>I LOVE YOU</h1>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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);
}
h1{
font-family: 'my_font';
}
</style>
hello every body
```以上是关于零基础跟我学前端之css3基础的主要内容，如果未能解决你的问题，请参考以下文章