零基础跟我学前端之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基础相关推荐
- 从零开始学前端 - 1. HTML基础知识
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 零基础不建议学前端_web前端培训心得：零基础怎样学好web前端
转行学web前端,这是不少人的选择,毕竟目前互联网行业受到了太多的关注,而很多人纷纷需要向互联网方面转型.而谈到转型,web前端无疑是很多人的选择,这是因为web前端属于可见即可得的编程语言,写出来就 ...
- 零基础不建议学前端_web前端开发零基础怎样入门-哈尔滨前端学习
web前端开发零基础怎样入门-哈尔滨前端学习,俗话说,知己知彼,百战百胜.要想学好web前端,首先要了解什么是web前端,下面由小编来给大家介绍一下: 1什么是web? Web就是在Http协议基础之 ...
- 从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录 从零开始学前端:程序猿小白也可以完全掌握!-今 ...
- python语言要英语基础吗_学编程需要英语基础吗？
很多编程培训机构都宣传0基础可入门.0基础可精通,好像是个人都能够学会编程一样,那么学编程需要什么条件?学编程需要英语基础吗?英语到底对于编程有多重要了? 学编程需要英语基础吗 编程和英语完全是两码事 ...
- 零基础学前端之css3高级特效
css3高级特效 1.本章目标 掌握2D转换对元素进行移动.旋转.缩放和倾斜 掌握在3D空间中改变元素的形状.位置和大小 2.2D转换方法 移动:translate() 旋转:rotate() 缩放: ...
- 零基础不建议学前端_临夏零基础怎么学理发
网上常常可以看到这种问题:零基础怎么学理发.小白能学会理发吗.零基础学理发学不会怎么办.零基础学理发有优势吗等等.归功结底,其实都是由于自己性格的自卑.不自信而引起的. 美发是一种手艺.是一样技术,只 ...
- 零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】
[前端总路线学习笔记] 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engi ...
- 学python前端需要哪些基础知识_python之前端HTML/CSS基础知识学习笔记
1. 文件结构: HTML文件的固定结构: html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2- ...
最新文章
- linux 常用命令：
- exe4j 报错 找不到class
- C#程序出现内存溢出错误的解决办法
- 将SATA硬盘驱动嵌入Windows XP安裝盘（转载）
- Spring集成Thrift--Server AND Client
- 下拉框控件、列表控件、ComboBox
- 太阳能板清洗机器人科沃斯_太阳能电池板清洁机器人
- 2017-9-11 - A - webServer
- 如何用命令行写java程序_如何用java实现doc命令行
- LeetCode（821）——字符的最短距离（JavaScript）
- docker-compose 学习：通过 image 指令指定镜像搭建一个简单LNMP
- OpenCV-Python教程8-图像混合
- matlab输电线路模型,输电线路模型及其特性.ppt
- 挖个大坑：挑战用纯micropython写一个nes模拟器（一）
- 机器学习笔记15——决策树(DT)、ID3算法、C4.5算法原理以及python实现案例
- 莫名骨痛，警惕骨转移
- MP4文件格式简要解析——图文代码并茂
- iphone开发中的手势操作：Multiple Taps
- Java 全限定类名和非限定类名有何区别
- 吴恩达深度学习笔记(21)-神经网络的权重初始化为什么要随机初始化？