社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
1.列举一些块级标签和行内标签(越多越好)
块级元素bai(block element)<div>最常用的块级元素</div><dl> 和<dt> <dd>搭配使用的块级元素<form> 交互表单<h1> 大标题</h1><hr> - 水平分隔线<ol> -排序表单</ol><p> 段落</p><ul> -无序列表</ul>
行内元素(inline element)<a> 锚点</a><b> 粗体</b><br> 换行<em> 强调</em><i>斜体文本效果</i><sup>上标</sup>;<sub>下标</sub>;<u>下划线</u>;<input>文本框</input>;<del>删除线</del>;<strong>加粗</strong>;
····························································
2.标签的四大通用属性是什么?分别的作用是什么?
····························································
3.a标签的四个作用分别是什么?以及功能阐述
····························································
4.什么是语义化标签?有什么作用?
什么是语义化标签?
语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。
作用：
列举
<title>：页面主体内容。<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。<ul>：无序列表;<li>：有序列表。<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。<nav>：标记导航，仅对文档中重要的链接群使用。<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<footer>：页脚，只有当父级是body时，才是整个页面的页脚。····························································
5.meta标签都能干嘛?作用分别是什么
meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；RASC内容等级，等等。Meta 对象代表 HTML 的 一个
<meta>元素。<meta>元素可提供有关某个 HTML 元素的元信息(meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。Content：设置或返回<meta>元素的content属性的值。httpEquiv：把content属性连接到一个HTTP头部。Name：把content属性连接到某个名称。Scheme：设置或返回用于解释content属性的值的格式。
····························································
6.表单中的name属性是干嘛的?name 属性规定 input 元素的名称。
①name 属性用于对提交到服务器后的表单数据进行标识；
②或者在客户端通过 JavaScript 引用表单数据。注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
<input name="value">
input标签的name属性的作用：name是用来提交内容时的键；表单中的 input 标签必须设置 name 属性，否则在提交表单时，用户在其中输入的数据不会被发送给服务器；form 标签的 name 属性可以用来为表单设置一个独一无二的标识符，以便使用 DOM 时可以区分各个表单；
····························································
7.如果表单中有文件域,如何实现文件上传?需要修改哪些地方?
文件域
文件域的使用以及文件上传的配置：
当前表单中如果有file文件控件 那么必须做如下配置
form标签的entype=“mutilpart/form-data”；form标签的method改成post；entype的默认值是application/x-www-form-urlencodeed；application/x-www-form-urlencoded表示的意思就是把表单数据以url编码的字符串方式提交；这种方式 无法适用于 文件上传enctype="mutilpart/form-data"；····························································
8.元素在使用时 需要注意什么？ 如果使用错误 会出现什么问题？
<head></head>标签内添加<link>标签，如外部样式表为style.css，那么我们需要在head标 签中添加的是<link href="css/style.css" rel="stylesheet" type="text/css"/>,首先href是引入样式的地址必不可少，rel定义了文档与链接的关系，stylesheet是定义一个外部加载样式表。····························································
9.Html中如何提高页面性能’’
1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。2、如果CDN服务质量下降了，那么你的工作质量也将下降3、无法直接控制组件服务器；····························································
10.阐述主流的浏览器内核分别是什么
····························································
11.xhtml和html有什么区别
一、其基础语言不同
1、XHTML是基于可扩展标记du语言（XML）。zhi
2、HTML是基于标dao准通用标记语言（SGML）。
二、语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
三、可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
四、大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
五、公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。
扩展资料：
HTML到XHTML的过渡：
从HTML到XHTML过渡的变化比较小，主要是为了适应XML。最大的变化在于文档必须是良构的，所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。
而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字，必须用双引号括起来（而在SGML和HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号）。所有元素，包括空元素，比如img、br等，也都必须闭合，实现的方式是在开始标签末尾加入斜扛，比如<img … />、<br />。
1.阐述CSS的三种引入方式以及优先级
1.行内样式
2.内嵌样式
3.外链样式
行内>内嵌>链接
····························································
2.CSS选择器有哪些?权值分别是多少?
默认样式(<0)<通配符选择器(0)<标签选择器(1)<class选择器(10)<id选择器(100)<行内样式(1000)<!important(>1000);
基本选择器：通配符选择器，标签选择器，class选择器，id选择器，
复合选择器：交集选择器（#.），并集选择器(,)，子代选择器，后代选择器，
····························································
3.阐述CSS三大特性(层叠 继承 优先级)
继承：子类可以使用父类的属性
层叠：层叠性只有在多个选择器选中"同一个标签",然后又设置了"相同的属性",才会发生层叠性
优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
····························································
4.说一下伪类选择器的使用顺序
链接被访问之前选中
a:link{}
链接被访问之后选中
a:visited{}
鼠标悬停被选中
a:hover{}
链接被按下之后
a:active{}
由于样式的叠加特性和用户的操作先后顺序影响，
以上四个伪类选择器在书写时尽量按照link vistied hover active的顺序来书写。
首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）规则是由于CSS特殊性导致，css特殊性有一个按顺序的规则（同一条css规则，后出现会覆盖前面的同样规则）
在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色；
如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。 其实link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换）
····························································
5.background背景属性都有哪些 ?以及连写的时候要注意什么background-color：指定要使用的背景颜色;默认transparent；background-image：指定要使用的一个或多个背景图像background-repeat：指定如何重复背景图像background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。scroll 背景图片随页面的其余部分滚动。这是默认；fixed 背景图像是固定的；inherit 指定background-attachment的设置应该从父元素继承；local 背景图片随滚动元素滚动。background-position：指定背景图像的位置background-size：指定背景图片的大小；cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。background-clip：指定背景图像的绘画区域；padding-box 背景图像填充框的相对位置；border-box 背景图像边界框的相对位置；content-box 背景图像的相对位置的内容框。
background: color url() repeat attachment position;
连写的时候要注意空格，中间要隔开最后写封号结束
W3C:background: color position size repeat origin clip attachment image;
····························································
6.阐述盒子模型
MDN中的定义： W3C盒模型是 CSS 规范的一个模块，它定义了一个长方形的盒子，每个盒子拥有各自的内边距和外边距，并根据视觉格式化模型来对元素进行布局。
标准盒模型：
其中最主要的五个属性：
width：内容区（content）的宽度。
height：内容区（content）的高度。
padding：内边距。
border：边框。
margin：外边距。
在标准盒模型中，整个div可以看做一个盒子，而此时整个盒子的宽度并不等于width，而是width+2border+2padding，最中间的content宽度等于width;
此时设置的宽度只能应用到内容区。
值得一提的是，虽然margin也属于存在于盒子模型中，但并不参与盒子模型的宽度和高度计算，可以看做是用于控制与其他元素之间的距离关系。
IE盒模型：
IE5.5及更早的版本使用的是IE盒模型，而IE6之后，也遵从了标准盒模型。它的计算方法与标准盒模型不同，接下来会阐述不同在哪。
设置宽度后，效果和宽度一样：因此若改动任意一个width、padding或border都会导致盒子的大小发生改变，这对布局来说十分不友好。
解决办法：使用box-sizing属性改变盒子模型的计算方式。
MDN中写道：如果box-sizing为默认值content-box，width、min-width、max-width、height、min-height 与 max-height控制内容大小。
····························································~
7.margin使用的时候注意点有哪些?
父盒子没有定位，子盒子margin-top边框塌陷： 解决方法：
1.给父盒子加上border边框
2.给父盒子加上overflow：hidden
margin的合并现象,相邻的地方同时使用了外边距,只取较大的那个外边距值。
行内元素不生效
····························································
8.padding使用时候注意点有哪些?
····························································
9.什么是边框塌陷?如何解决?
边框塌陷：父子元素边框塌陷；大div没有设置高度，那么大（父）div的高度是由这四个小（子）div的高度撑起来的，但是子div脱离了标准文档流使得子元素无法撑起文档流的时候，就会边框塌陷。
解决：
····························································
10.阐述一下什么是标准文档流
标准文档流：文档的流向，文档默认排布方式；
什么是标准文档流：每一类标准属性不同，默认文档流向也不同。块级元素：从上到下，行内元素：从左到右，行内块元素：有大小从左到右。····························································
11.浮动如何设置?以及清除浮动的四种方式?
设置浮动：float：left/right;
清除浮动的四种方式:
给浮动元素的父元素添加高度;
clear:both;在最后一个子元素新添加一个块级元素，然后将其设置clear:both,这样就可以清除浮动。
伪元素清除浮动;元素:after;
br标签清浮动:br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。
····························································
12.rgba()和opacity的透明效果有什么不同？
····························································
13.CSS中隐藏盒子有几种方式?请表述分别是否占位问题
占位:
position=relative;
Margin-left=-500px;
opacity=“0”;
visibility=hidden;
background=transparent; 背景透明
不占位:
position=absolute/fixed;
display=none;
marginTop=-500px; 同方向的 不占位 会带着后面元素一起走
marginLeft=-500px; 不同方向的 则占位
float=left; 让当前元素不占位
····························································
14.CSS中position定位属性分别都是什么?有什么区别?分别按照什么定位?
在CSS中关于定位的内容是：
position:relative | absolute | static | fixed；
relative： 相对定位：
按原本应出现的位置偏移；
相对定位以元素自身位置为基准设置位置；
相对定位占位。
absolute： 绝对定位：（元素变成行内块）
直接按照坐标值定位；
是按照有定位属性(absolute/relative/fixed)的父盒子进行定位的，如果父系盒子都没有定位属性 ，按照body定位。
如果当前元素直接在body里面 那么 绝对定位 按照body去定位；
如果当前元素有父元素 但是父元素 并没有设置position值(父元素没有定位)祖先元素也没有定位 ，则还按照body。
如果父系盒子有定位属性 那么 当前元素的绝对定位 按照那个父盒子进行定位。
绝对定位 不占位。
子绝父相 (子元素绝对定位 父元素相对定位)；
static 静态定位 是默认值 (默认没定位)
fixed 固定定位: 固执型
直接按照浏览器窗体定位 不会随着浏览器的滚动而滚动；
固定定位一定要注意 不能定位到窗体外部， 一旦定位外部了，那么就永远看不见了；
····························································
15.关于CSS中浏览器前缀有哪些?分别对应哪个浏览器
Opera浏览器: -o-
火狐浏览器: -moz-
谷歌和Safari: -webkit-
IE前缀: -ms-
····························································
16.Line-height行高在什么情况下会失效
在用css对行高进行设置时，line-height的属性必须在font的下面，否则无效！····························································
17.CSS中有哪些兼容问题?是如何处理的?(越多越好 最少5个)
*{margin:0;padding:0;}display:inline;将其转化为行内属性；overflow:hidden;或者设置行高line-height 小于你设置的高度。display:block;后面加入display:inline;display:table;min-height不兼容：{min-height:200px; height:auto !important; height:200px; overflow:visible;}1、双倍浮动BUG：
描述：块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大；
解决方案：给float的元素添加 display:inline;将其转换为内联元素；
2、表单元素行高不一致：
解决方案：
①、给表单元素添加vertical-align:middle;
②、给表单元素添加float:left；
3、IE6（默认16px为最小）不识别较小高度的标签（一般为10px）：
解决方案：
①、给标签添加overflow:hidden;
②、给标签添加font-size:0;
4、图片添加超链接时，在IE浏览器中会有蓝色的边框：
解决方案：
给图片添加border:0或者border：none;
5、最小高度min-height不兼容IE6;
解决方案：
①、min-height:100px;_height:100px;
②、min-height:100px;height:auto!important;height:100px;
6、图片默认有间隙：
解决方案:
①、给img添加float属性；
②、给img添加display：block;
7、按钮默认大小不一：
解决方案：
①、如果按钮是一张图片，直接用背景图作为按钮图片；
②、用a标记模拟按钮，使用JS实现其他功能；
8、百分比BUG：
描述：父元素设置100%，子元素各50%，在IE6下，50%+50%大于100%；
解决方案：
给右边的浮动元素添加clear:right；
····························································
18.你自己认为的CSS性能优化有哪些?
····························································
19.CSS精灵是什么? 优点有什么?为什么要使用CSS精灵?
css精灵即CSS Sprite，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所z有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了;
CSS Sprites 优点：
1、减少图片的字节
2、减少了网页的http请求，从而大大的提高了页面的性能，优化页面展示速度。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
CSS Sprites 缺点：
1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
····························································
20.CSS中颜色取值有哪些?
····························································
21.块级元素,行内元素,行内块元素之间有什么区别?
行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。
块级元素从新行开始，结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效；
行内不独占一行 不能设置宽高 宽度与内容有关 同站一行
块级独占一行 有宽没高 在没设置宽默认100%
行内块在一行内显示 可以设置宽高
区别：
····························································
22.线性渐变与径向渐变的用法
渐变使用的是background-image；线性渐变 linear-gradient；径向渐变 radial-gradient；
用法1:
linear-gradient(颜色1,颜色2,颜色3,...颜色n);
background-image:linear-gradient(red,#0f0,purple);
都是平均分的渐变;
用法2:
linear-gradient(颜色1 百分比,颜色2 百分比,...颜色n 百分比);
background-image:linear-gradient(red 10%,#0f0 50%,blue 80%)
用法3:
linear-gradient(角度deg,颜色1 百分比....)
background-image: linear-gradient(180deg,red,blue);
用法1
background-image: radial-gradient(red,blue);
用法2
background-image: radial-gradient(red 10%,blue 30%);
改变圆心位置 center表示默认 是中心
background-image: radial-gradient(circle at center ,red 10%,blue 30%);
圆心还可以写px值
background-image: radial-gradient(circle at 100px 100px ,red 10%,blue 30%);
如果后面两个数是相等的 那么就是正圆的径向 如果不相等 这就是椭圆
background-image: radial-gradient(ellipse at 100px 100px ,red 10%,blue 30%);
线性渐变重复
background-image: repeating-linear-gradient(60deg,red 10%,blue 30%);*/
径向渐变重复
background-image: repeating-radial-gradient(red 10%,#0f0 20%);
····························································
23.盒子绝对居中如何实现?
position-absolute;
Top=0;
Left=0;
Right=0;
Bottom=0;
Margin:auto;
利用css的 position属性，把div2相对于div1的top、left都设置为50%，
然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，
····························································
24.为什么要初始化样式?
····························································
25.CSS中link和@import的区别是?
1.CSS3中动画与过渡有什么区别?
transition需要触发一个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。
1）动画不需要事件触发，过渡需要。
2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。
animation概述：
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
CSS3动画
当在@keyframe创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:
规定动画的名称
规定动画的时长 (如果不添加时长 则默认是0就等于没有动画执行时间 就没有效果)
请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%。
0%是动画的开始, 100%是动画的完成。
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state属性
animation-name 规定@keyframes动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或革秒。默认是0.
animation-timing-function 规定动画的速度曲线。默认是"eage".
animation-delay 规定动画何时开始。默认是0。
animation-iteration-count 规定动画被播放的次数。默认是1
animation-direction 规定动画是否在下一周期逆向地播放。默认是"normal"
animation-fill-mode: 规定动画执行完是否停留最终状态 默认值是none forwards(最后义诊) backwards(第一帧)
animation-play-state 规定动画是否正在运行或暂停。默认是"running"
····························································
2.将你知道的CSS3选择器列举出来（越多越好）
选择器1+选择器2{ css代码}
选择器1~选择器2{css代码}
[属性名]{css代码}
选择器[属性名]{css代码}
选择器[属性名1][属性名2]{css代码}
选择器[属性名="属性值"]{css代码}
选择器[class~="class名字"]{css代码}
选择器[class^="字符串"]{css代码}
选择器[class*="字符串"]{css代码}
选择器[class$="字符串"]{css代码}
:link :visitied
:hover :active
:focus表示当前元素获取焦点时触发的伪类，
只针对获取能够获取焦点的元素生效。
选择器:target
:enabled,匹配每个已启用的元素(大多用在表单元素上):disabled,匹配每个被禁用的元素(大多用在表单元素上):checked，匹配每个已被选中的input元素(只用于单选按钮和复选框)1.子元素
选择器:nth-child(number){CSS代码}
2.第一个子元素
:first-child{css代码}
3.最后一个子元素
:last-child{css代码}
4.找到没有子元素的元素本身
选择器:empty{css代码}
5.匹配只有一个子元素的元素
选择器:only-child{css代码}
:not(选择器){不是该选择器的元素生效该样式}
:first-letter{表示当前选择器选择的元素的第一个字符}
:first-line{表示当前选择器选择的元素第一行文字}
::selection{表示选中文字时 文字的样式}
注意: 文字大小不生效
····························································
3.简述C3的2D 3D转换有哪些 如何设置转换圆心？
css中的所谓转换 指的是改变元素位置,尺寸,形状的一种属性；分为 2D转换和 3D转换。
转换分为四大方向: 旋转(transform: rotate) 位移(translate) 缩放（scale） 倾斜（skew）
分别进行2D和3D的效果转换
所谓的3D转换 就是在父元素里面添加一个属性 perspective:px值; 100~900之间，值越小 3D效果越明显，值越大 3D效果越不明显；
默认的旋转圆心是中心点 也可以通过 transform-origin去改变圆心transform-origin:x轴圆心 y轴圆心 z轴圆心(只有3D转换才生效)
····························································
4.CSS3有哪些新特性
border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-radius 属性；
border-radius: 10px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-radius: 10px 20px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 20px;
border-radius: 10px 20px 30px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;
box-shadow：向框添加一个或多个阴影。
语法：box-shadow: 水平位移 垂直位移 [模糊半径 阴影尺寸 阴影颜色 inset(内部阴影)];
box-shadow: 10px 10px 5px #888888;
border-image：设置边框图像，该属性是一个简写属性，用于设置以下属性：
border-image-source：边框的图片的路径；
border-image-slice：图片边框向内偏移；
border-image-width：图片边框的宽度；
border-image-outset：边框图像区域超出边框的量；
border-image-repeat：图像边框是否应平铺(repeate)、铺满(round)或拉伸(stretch)。
border-image: url(/i/border.png) 30 30 round;
background-size：背景图片的尺寸。
background-size: 100px 100px;/* 第一个值设置宽度，第二个值设置高度 */
background-size: 50% 50%;/* 以父元素的百分比来设置背景图像的宽度和高度 */
background-size: cover;/* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */
background-size: contain;/* 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 */
background-origin：规定 background-position 属性相对于什么位置来定位。
background-origin: padding-box;/* 背景图像相对于内边距框来定位（默认值） */
background-origin: border-box;/* 背景图像相对于边框盒来定位 */
background-origin: content-box;/* 背景图像相对于内容框来定位 */
background-clip：规定背景的绘制区域。
background-clip: padding-box;/* 背景被裁剪到内边距框 */
background-clip: border-box;/* 背景被裁剪到边框盒（默认值） */
background-clip: content-box;/* 背景被裁剪到内容框 */
linear-gradient()：线性渐变。
语法：background: linear-gradient(方向, start-color, ..., last-color);
background: linear-gradient(red, blue); /* 省略方向默认从上到下 */
background: linear-gradient(to right, red , blue);/* 从左侧开始的线性渐变，从红色开始，转为蓝色 */
background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角的线性渐变 */
radial-gradient()：径向渐变。
语法：background: radial-gradient(圆的类型 渐变的大小 at 渐变的位置, start-color, ..., last-color);
/* 椭圆形渐变 */
background: radial-gradient(red, yellow, green);
/* 圆形渐变 */
background: radial-gradient(circle, red, yellow, green);
/* 颜色结点不均匀分布 */
background: radial-gradient(red 10%, green 50%, blue 100%);
/* 圆心在中间 */
background: radial-gradient(at 50% 50%, blue, green, yellow);
/* 圆心在离左侧60%，离上侧50%的地方，半径长度为从圆心到离圆心最近的边 */
background: radial-gradient(closest-side at 60% 55%, blue, green, yellow);
word-break：定义如何换行。
word-wrap：允许长的内容可以自动换行。
text-overflow：指定当文本溢出包含它的元素，应该发生什么。
text-shadow：文字阴影。
语法：text-shadow: 水平位移 垂直位移 [模糊半径 阴影颜色];
transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：transform: none（默认)|transform-functions;
transform-origin：允许您更改转换元素的位置。2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
语法：transform-origin: x-axis y-axis z-axis;
transform-origin: 0% 0%;/* 将元素左上角设为旋转点 */
transform-style：指定嵌套元素是怎样在三维空间中呈现。
rotate(angle)：定义 2D 旋转，在参数中规定角度。translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。translateX(n)：指定元素在X轴中的位移。translateY(n)：指定元素在Y轴中的位移。scale(n)：定义 2D 缩放转换。
transform: scale(2);/* 放大两倍 */
scaleX(n)：定义 X 轴方向的缩放转换。
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
