【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---03-CSS3背景与渐变

最新推荐文章于 2024-07-09 05:45:50 发布
最新推荐文章于 2024-07-09 05:45:50 发布
阅读量176 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405634/article/details/104365427
版权

03-CSS3背景与渐变

第1章 CSS3背景

1-1 背景图像区域（ background-clip）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		.border,.padding,.content{
			width: 300px;
			height: 300px;
			float: left;
			margin-left: 50px;
		}
		a{
			text-decoration: none;
			font-size: 30px;
		}
		.div1,.div2,.div3{
			width: 220px;
			height: 200px;
			border:10px solid rgba(0,255,0,0.3);
			padding: 50px;
			background-image: url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg");
			margin-top: 50px;
		}
		.border:hover div,.padding:hover div,.content:hover div{
			display: block;
		}
		.border div,.padding div,.content div{
			display: none;
		}
		.border:hover div{
			background-clip: border-box;
		}
		.padding:hover div{
			background-clip: padding-box;
		}
		.content:hover div{
			background-clip: content-box;
		}
	</style>
</head>
<body>
	<div class="border">
		<a href="">border-box</a>
		<div class="div1"></div>
	</div>
	<div class="padding">
		<a href="">padding-box</a>
		<div class="div2"></div>
	</div>
	<div class="content">
		<a href="">content-box</a>
		<div class="div3"></div>
	</div>
</body>
</html>
1-2 背景图像定位（ background-origin）

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			width: 300px;
			height: 150px;
			padding: 20px;
			border:5px solid red;
			background: url(http://climg.mukewang.com/582c342b0001fd6507000210.jpg) no-repeat center;
			background-origin: padding-box;
		}
		div:hover{
			background-origin: border-box;
			background: url(http://climg.mukewang.com/582c34220001091605000150.jpg) no-repeat 10px 10px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
1-3 背景图像大小（ background-size）

在这里插入图片描述

1-4 多重背景图像

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			width: 400px;
			height: 200px;
			border:10px solid rgba(255,0,0,0.5);
			padding: 20px;
			background: url(http://climg.mukewang.com/582c39c00001091605000150.jpg) no-repeat;
			background-color: #BBB;
			background-position: 20px 100px;
			background-size: 90%;
			font-size: 20px;
			text-align: center;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div>
		慕课网(IMOOC)国内最大的IT技能学习平台
	</div>
</body>
</html>
1-5 背景属性整合

在这里插入图片描述

第2章 CSS3渐变

在这里插入图片描述

2-1 线性渐变、上下、左右、对角

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		.border{
			width: 300px;
			height: 500px;
			float: left;
		}
		.border .one{
			width: 200px;
			height: 200px;
			background: linear-gradient(yellow,red);
		}
		.border .two{
			width: 200px;
			height: 200px;
			background: linear-gradient(to right,yellow,red);
		}
		.border .three{
			width: 200px;
			height: 200px;
			background: linear-gradient(to left top,yellow,red);
		}
	</style>
</head>
<body>
	<div class="border">
		上下方向渐变
		<div class="one"></div>
	</div>
	<div class="border">
		左右方向渐变
		<div class="two"></div>
	</div>
	<div class="border">
		对角方向渐变
		<div class="three"></div>
	</div>
</body>
</html>
2-2 线性渐变、角度、结点、透明

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			background: linear-gradient(to right,rgba(255,0,0,0) 20%,rgba(255,0,0,1) 50%,rgba(0,255,0,0.7) 100%,);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
2-3 线性渐变-重复渐变

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			width: 400px;
			height: 200px;
			background: repeating-linear-gradient(to right, red 0%,orange 5%,yellow 10%,green 15%,#0F0 20%,blue 25%,#606 30%);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
2-4 径向渐变

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			width: 200px;
			height: 300px;
			float: left;
			margin: 100px 0 0 50px;
		}
		.div1{
			background: -webkit-radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
			background:    -moz-radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
			background:      -o-radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
			background:         radial-gradient(60% 40%,closest-side circle,red,yellow,green,blue);
		}
		.div2{
			background: -webkit-radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
			background:    -moz-radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
			background:      -o-radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
			background:         radial-gradient(60% 40%,farthest-side circle,red,yellow,green,blue);
		}
		.div3{
			background: -webkit-radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
			background:    -moz-radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
			background:      -o-radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
			background:         radial-gradient(60% 40%,closest-corner circle,red,yellow,green,blue);
		}
		.div4{
			background: -webkit-radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
			background:    -moz-radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
			background:      -o-radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
			background:         radial-gradient(60% 40%,farthest-corner circle,red,yellow,green,blue);
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
</body>
</html>
2-5 径向渐变-重复渐变

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			width: 400px;
			height: 400px;
			background:  -webkit-repeating-radial-gradient(center, red 0%,orange 5%,yellow 10%,green 15%,#0F0 20%,blue 25%,#606 30%);
			background:     -moz-repeating-radial-gradient(center, red 0%,orange 5%,yellow 10%,green 15%,#0F0 20%,blue 25%,#606 30%);
			background:       -o-repeating-radial-gradient(center, red 0%,orange 5%,yellow 10%,green 15%,#0F0 20%,blue 25%,#606 30%);
			background:          repeating-radial-gradient(center, red 0%,orange 5%,yellow 10%,green 15%,#0F0 20%,blue 25%,#606 30%);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
2-6 IE渐变

在这里插入图片描述

2-7 渐变应用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		div{
			width: 400px;
			height: 400px;
			background-color: yellow;
			background-size: 100px 100px;
			background-image: -webkit-linear-gradient(45deg,purple 25%,transparent 25%),
			                  -webkit-linear-gradient(-45deg,purple 25%,transparent 25%),
			                  -webkit-linear-gradient(45deg,transparent 75%,purple 75%),
			                  -webkit-linear-gradient(-45deg,transparent 75%,purple 75%);
			background-image: -moz-linear-gradient(45deg,purple 25%,transparent 25%),
			                  -moz-linear-gradient(-45deg,purple 25%,transparent 25%),
			                  -moz-linear-gradient(45deg,transparent 75%,purple 75%),
			                  -moz-linear-gradient(-45deg,transparent 75%,purple 75%);
			background-image: -o-linear-gradient(45deg,purple 25%,transparent 25%),
			                  -o-linear-gradient(-45deg,purple 25%,transparent 25%),
			                  -o-linear-gradient(45deg,transparent 75%,purple 75%),
			                  -o-linear-gradient(-45deg,transparent 75%,purple 75%);
			background-image: linear-gradient(45deg,purple 25%,transparent 25%),
			                  linear-gradient(-45deg,purple 25%,transparent 25%),
			                  linear-gradient(45deg,transparent 75%,purple 75%),
			                  linear-gradient(-45deg,transparent 75%,purple 75%);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
dqh_zsh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学生网页设计与制作成品 HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页
01-09 8万+
HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 文章目录HTML5+CSS大作业——黑色主题个人博
HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页
12-02 3308
HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页
【慕课网】前端零基础入门---步骤四：升级页面化妆师CSS3---06-CSS3过渡
qq_43405634的博客
02-21 200
06-CSS3过渡 第1章 过渡的概念 第2章 transition属性详解 2-1 transition-property属性 2-2 transition-duration属性 2-3 transition-timing-function属性 2-4 transition-delay属性 第3章 transition综合实例 3-1 transition简写 ...
前端基础入门——升级页面化妆师CSS3
饭的笔记本
02-05 968
目录 CSS3选择器 新增基本选择器 子元素选择器 相邻兄弟元素选择器 通用兄弟选择器 群组选择器 属性选择器 element[attribute] 伪类选择器（权值为10） 伪元素（权值为1） CSS3边框与圆角 border-radius属性 box-shadow属性 border-image属性 CSS3背景与渐变 CSS3背景图像区域 CSS3背景图像定位 ...
CSS-7-美化网页元素
baidu_38126306的博客
12-06 182
CSS -> 美化网页元素 1. 为什么要美化元素 有效的传递页面信息 美化网页，页面漂亮，才能吸引用户 凸显页面的主题 提高用户的体验 span标签：一种约定俗成，重点要突出的字，使用span套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
web前端学习之——页面美妆师css3基础篇
weixin_43048929的博客
04-28 510
页面美妆师css3基础 结构(html)与样式(css)相分离 1.css基本语法规范 1.1 行内式（内联样式） 是通过标签的style属性来设置元素的样式 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> 1.2 内部样式表（内嵌样式表） 是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义 <head> <style type="text/CSS"> 选择器（选
CSS3学习笔记（一）
萌新猿的博客
03-28 227
1、初识CSS 1.1 什么是 CSS？ CSS:Cascading Style Sheet 层叠级联样式表 CSS 是一种描述 HTML 文档样式的语言。 CSS 描述应该如何显示 HTML 元素。 CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作。它可以同时控制多张网页的布局 外部样式表存储在 CSS 文件中 *：也称级联样式表。 1.2 CSS 解决的问题 HTML 从未打算包含用于
CSS3学习
The_Ink的博客
08-11 665
CSS3学习 如何学习 CSS是什么 CSS怎么用（快速入门） CSS选择器（重点+难点） 美化网页（文字、阴影、超链接、列表、渐变…） 盒子模型 浮动 定位 网页动画（特效效果） 什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动… 发展史 CSS1.0 CSS2.0 DIV（）块 + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动、定位 CSS3.0 圆
css占位符_如何在CSS中创建占位符加载动画
weixin_26715991的博客
08-29 2033
css占位符Motion plays an important role in applications. It can help to make interfaces more expressive and intuitive, whilst also providing key information, such as feedback that can guide a user’s atte...
七彩墨绿色美容spa健身会所模板-七彩 整体色 墨绿 美容 女性 健身 会所 整站 html5 整站 企业.rar
12-19
设计师可能会利用CSS3来控制颜色、渐变和阴影效果，为网站增添视觉吸引力。 此外，作为整站模板，它应该包含了网站的各个部分，如首页、关于我们、服务项目、预约系统、新闻动态、联系我们等页面的模板设计。这些...
aldeiadosakitas:网站feito em HTML5，JAVASCRIPIT，CSS
03-06
最后，CSS（层叠样式表）则是网站的化妆师，负责美化网页的视觉呈现。CSS3带来了许多新特性，如阴影效果、渐变、过渡和动画，使得设计更加丰富多彩。此外，CSS3的媒体查询使得响应式设计成为可能，让网站能适应不同...
HTML5化妆品电商网站模板是一款响应式化妆品网站模板下载。_html网站模板_网页源码移动端前端_H5模板_自适应响.rar
08-04
在化妆品网站模板中，CSS3被用来创建吸引人的视觉效果，如产品的悬停效果、过渡动画和背景图像效果，提升用户体验。 4. **JavaScript**: JavaScript是一种客户端脚本语言，用于实现网页的动态交互。在这个模板中，...
html+css+js网页设计.zip
03-05
CSS则是网页的化妆师，它允许开发者控制页面元素的外观、布局和响应式设计。通过选择器（如元素选择器、类选择器、ID选择器等）定位HTML元素，并应用样式属性，如颜色、字体、大小、位置等。CSS还可以利用盒模型...
时尚大气美容化妆培训学校网站模板5765.zip
04-07
设计师可能运用了现代CSS框架，如Bootstrap，或者自定义的CSS3属性来实现动画效果、过渡、渐变、阴影等。此外，响应式设计是必不可少的，使得网站在不同设备（如手机、平板、电脑）上都能良好显示。 JavaScript的...
前端面试题24（css3）
God's asylum的博客
07-08 559
回答要点：CSS Sprites 是一种将多个小图标或图像合并到一个大图像中的技术，这样可以减少 HTTP 请求次数，从而提高页面加载速度和性能。
【前端从入门到精通：第九课：CSS3新增属性及伸缩盒布局】
weixin_50556117的博客
07-09 787
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容。align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式。stretch ： align-content 的默认值，各行将会伸展以占用额外的空间。既过渡的速度，方式等。
MongoDB的Linux安装、基本操作、可视化、实验源码与报告文档
最新发布
07-10
MongoDB的Linux安装 在Linux上安装MongoDB，通常可以通过包管理器（如apt-get、yum等）或从MongoDB官网下载压缩包进行手动安装。以下是通过包管理器安装MongoDB的简要步骤（以Ubuntu为例）： 更新系统： 打开终端，使用sudo apt-get update命令更新系统包列表。 安装MongoDB： 使用sudo apt-get install -y mongodb命令安装MongoDB。这将自动处理依赖关系，并安装MongoDB服务器。 启动MongoDB服务： 安装完成后，可以使用sudo systemctl start mongod命令启动MongoDB服务。 验证安装： 使用mongo命令连接到MongoDB shell，如果能够成功连接并显示MongoDB的shell提示符，则表示MongoDB已成功安装并正在运行。 注意：以上步骤是基于Ubuntu系统的示例。对于其他Linux发行版，安装命令可能有所不同。此外，也可以从MongoDB官网下载.tgz压缩包进行手动安装，具体步骤包括下载、解压、配置环境变量、创建数据存储目录等。 M
数据质量管理（41页 PPT）.ppt
07-10
数据质量管理（41页 PPT）
1.09 css3-布局
10-07
CSS3的多列布局模块引入了一套用于创建多列文本容器的属性，使得设计师能够更有效地利用宽屏设备的潜力。 1. **column-count属性**: - 定义：`column-count`属性规定元素应该被分割的列数，帮助将内容分布到设定的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值