你好，HTML5主要是放网页代码和结构的，CSS主要是用来给网页内容（文字、图片）排版、添加样式以及制作简单动画的，简单来说就是美化页面，或者说就是让用户觉得更好看，于是运用HTML5+CSS 组合起来的技术，就能达到这种效果。下面我给你举例说明吧：
专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!成都创新互联公司为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，网站制作、成都网站建设负责任的成都网站制作公司!
未添加样式： p我爱中国/p
然后假如我把“我爱中国”变成红色、字体大小为22px
有3种方法（第二、第三种方法都要使用标签选择器）：
行内样式(直接在标签元素内部添加，属性之间用英文输入法下的分号隔开)：
div
p style="color:red;font-size:22px"我爱中国/p
/div
内部样式（在head标签内部添加style标签）：
head
style
div p{
color:red;
font-size:22px
}
/style
/head
外部样式（先新建一个 .css文件，然后在head标签内部用link/引入）：
先在.css文件写代码如下：
div p{
color:red;
font-size:22px
}
再将.css文件引入，假如你的文件你命名为index.css,那么代码如下：
head
link href="index.css" ref="stylesheep" type="text/css"/
/head
这样，三种方法达到的是同一种效果，只是第三种比较专业，实现了HTML代码和.css文件的完全分离，这样有几个好处：1.可以更容易被搜索引擎收录（这里涉及到SEO优化的知识）；2.网页代码量减少了，网页打开速度加快了，能提高用户体验；3.便于网页后期的修改和维护。
今天先给你讲这么多，希望采纳，谢谢
HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。
HTML5草案的前身名为 Web Applications 1.0，于04年被WHATWG提出，于07年被W3C接纳，并成立了新的 HTML 工作团队。
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。
HTML5将会取代99年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
1、给body添加背景图，在body中添加一个父盒子（父盒子开启绝对定位），父盒子中再添加一个子盒子。
2、给window添加鼠标移动事件，根据鼠标在浏览器中的坐标（clientX和clientY）修改父盒子的top和left，以达到移动镜面的效果。
3、给子盒子添加背景图（和body背景图一致），在window的鼠标移动事件中修改子盒子的样式——background-position，改变子盒子中的背景图在盒子中的显示位置，使背景图的显示与body一致。
4、再给子盒子添加缩放（transform:scale(2)），即可实现放大功能。
1、由于背景图无法设置透明度，所以使用body的伪元素，给伪元素添加背景图和opacity属性。
2、这时虽然给背景设置上了透明的，但却是发白的那种透明，要想变成暗沉的透明，只需要给body添加背景颜色就行。
3、background-position的使用，由于是要将背景的选中位置移动到盒子的中心，所以使用的是负值。
!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"
titleDocument/title
style
body {
padding: 0;
background-color: #000;
margin: 0;
}
body::after{
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-image: url('伊芙琳.jpg');
background-position: 0px 0px;
background-size: 100% auto;
opacity: 0.1;
}
.magnifier {
width: 300px;
height: 300px;
background-image: url('伊芙琳.jpg');
background-size: 1730px auto;
background-position: 0px 0px;
transform: scale(2);
margin: 0;
position: relative;
z-index: 100;
}
.main {
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
position: absolute;
}
/style
/head
body
div class="main"
div class="magnifier"/div
/div
script
let flag = true
let magnifier = document.getElementsByClassName('magnifier')[0]
let main = document.getElementsByClassName('main')[0]
let boxLeft = 0
let boxTop = 0
window.onmousemove = (event) = {
if(!flag) return
setTimeout( ()={
flag = true
},50)
console.log(event.clientX, event.clientY);
if(event.clientX 1590) {
event.clientX = 1590
}
boxLeft = event.clientX 1590 ? '1440px' : event.clientX 150 ? event.clientX - 150 + 'px':'0px'
boxTop = event.clientY 720 ? '575px' : event.clientY 150 ? event.clientY - 150 + 'px':'0px'
main.style.left = boxLeft
main.style.top = boxTop
// magnifier.style.backgroundPosition = '830px 570px'
magnifier.style.backgroundPosition = '-' + boxLeft + ' ' + '-' + boxTop
flag = false
}
/script
/body
/html
左右有半截高度边框，这个只有2个办法：
不用边框，边线做成背景图
输入框无边框，背景设为透明，弄个跟输入框一半高度的div，用定位重叠在输入框下面，div左右下三条边设置为灰色
