CSS 特性被分成相同的类别,如手写体特性、文档特性、后面板特性、边距特性、产业布局特性、功能定位特性、列印特性等。对新手而言,须要熟识并掌控那些特性。后面她们早已如是说了30个CSS示例，但捷伊CSS3属性呢？有鉴于此小贴士也特地重新整理了10个你须要熟识的CSS3特性，来她们一同如是说下吧！
1. border-radius
很难正式成为最盛行的 CSS3 特性， border-radius是 CSS3 的旗舰级特性。虽然很多雕塑家依然惧怕产业布局可能将因应用程序而异，但像梯形这种的小关键步骤是招揽她们的单纯方式！
具备嘲讽象征意义的是，她们都照办为终端应用程序提供更多代替观赏新体验的设想。不过，讶异，很多人在图形界面下载时觉得不那样。
border-radius: 4px;Circles
很多听众可能将不晓得她们也能用那个特性建立圆盘。您所要做的是将直径增设为原素长度或度的三分之一。
border-radius: 50px;所以，假如她们想找点Courville，她们还能借助灵巧框数学模型（在#8 中详尽如是说）将文档在圆盘内横向和水准德博瓦桑县。它须要许多标识符，但而已即使须要补偿金各式各样分销商。
display: flex; align-items: center; justify-content: center;2. box-shadow
接下来，她们有 ubiquitous box-shadow，它允许您立即将深度应用到您的原素。而已不要对您增设的值太讨厌！
box-shadow: 1px 1px 3px #292929;box-shadow 接受四个参数：
x offsety offsetblurcolor of shadow现在，很多人没有意识到您能 box-shadows 一次申请多个。这可能将会导致许多非常有趣的效果。例如，她们能使用蓝色和绿色阴影来放大每个阴影。
box-shadow: 1px 1px 3px green, –1px –1px 3px blue;Clever Shadows
通过对 ::before 和 ::after 伪类应用阴影，她们能建立许多非常有趣的视角。这是一个能帮助您入门的方式：
HTML
<div class=“box”> <img src=“tuts.jpg” alt=“Tuts” /> </div>CSS
.box:after { content: “”; position: absolute; z-index: –1; /* hide shadow behind image */ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% (see width above) */ height: 100px; bottom: 0; }3.text-shadow
与 类似 box-shadow，它必须应用于文档，并且它接收相同的四个参数：
x-offsety-offsetblurcolor of shadowh1 { text-shadow: 0 1px 0 white; color: #292929; }文字轮廓
同样，就像它的兄弟那样 box-shadow，她们可以通过使用逗号作为分隔符来应用多个阴影。例如，假设她们要为文档建立轮廓效果。尽管webkit 确实提供更多了 stroke 效果，但她们能使用以下方式访问更多应用程序（尽管不是很漂亮）：
body { background: white; } h1 { text-shadow: 0 1px 0 black, 0 –1px 0 black, 1px 0 0 black, –1px 0 0 black; color: white; }4.text-stroke
小心这种方式。这是一个非标准功能。该 text-stroke 特性还不是 CSS3 规范的一部分。但，假如您使用 -webkit- 前缀，现在所有主要应用程序都支持它。
h1 { -webkit-text-stroke: 3px black; color: white; }特征检测
她们如何为 Firefox 提供更多一组样式，为 Safari 或 Chrome提供更多另一组样式？一种解决方案是使用特征检测。
通过特征检测，她们能使用 JavaScript 来测试某个特性是否可用。假如不是，她们准备后备。
让她们回到那个 text-stroke 问题。black让她们为不支持那个特性的应用程序 增设一个后备颜色 （除了webkit 目前）。
var h1 = document.createElement(h1); if ( !( webkitTextStroke in h1.style ) ) { var heading = document.getElementsByTagName(h1)[0]; heading.style.color = black; }首先，她们建立一个虚拟 h1原素。然后，她们通过特性执行完整的腔搜索以确定该-webkit-text-stroke 特性是否可用于该原素 style 。假如 不是，她们将抓取 Hello Readers 标题，并将其颜色增设 white 为 black。
请注意，她们在这里是通用的。假如您须要替换h1 页面上的多个标签，则须要使用 while 语句来过滤每个标题，并相应地更新样式或类名。
她们也 只 测试 webkit，当其他应用程序最终也可能将支持该 text-stroke特性时。记住这一点。
5.多种背景
该 background 特性早已过大修以允许在 CSS3 中使用多个背景。
让她们建立一个愚蠢的示例，仅作为概念证明。由于附近没有合适的图片，我将使用两张教程图片作为她们的背景。当然，在现实世界的应用程序中，您可能将会使用纹理，也可能将使用渐变作为背景。
.box { background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; }上面，通过使用逗号作为分隔符，她们引用了两个单独的背景图像。请注意，在第一种情况下，它是如何放置在左上位置 ( 0 0) 的，而在第二种情况下，它是如何放置在右上角 (100% 0) 的。
确保为不支持多背景的应用程序提供更多后备方案。她们将完全跳过该特性，将您的背景留空。
补偿金旧应用程序
要为旧应用程序（如IE7）添加单个背景图像，请 background两次声明该特性：第一次为旧应用程序，第二次作为覆盖。或者，您能再次使用Modernizr。
.box { /* fallback */ background: url(image/path.jpg) no-repeat; /* modern browsers */ background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; }6.background-size
在现代 CSS 之前，她们被迫使用偷偷摸摸的技术来允许调整大小的背景图像。
background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%;上面的标识符将引导背景图像占用所有可用空间。例如，假如她们想要一个特定的图像占据 body 原素的整个背景，而不管应用程序窗口的长度如何？
body, html { height: 100%; } body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; }这里的所有都是它的。该 background-size 特性将接受两个参数：分别为 the x 和 y widths。
尽管最新版本的 Chrome 和 Safari 原生支持 background-size，但她们依然须要为旧应用程序使用供应商前缀。
body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; }7.text-overflow
最初是为 Internet Explorer 开发的，该 text-overflow 特性能接受两个值：
clipellipsis此特性可用于截断超出其容器的文档，同时仍为用户提供更多许多反馈，例如省略号。
你晓得吗？ Internet Explorer 从 IE6 开始就提供更多了对那个特性的支持？她们创造了它！
.box { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border: 1px solid black; width: 400px; padding: 20px; cursor: pointer; }此时，您可能将会考虑在用户将鼠标悬停在框上时显示整个文档。
#box:hover { white-space: normal; color: rgba(0,0,0,1); background: #e3e3e3; border: 1px solid #666; }有点奇怪（除非我弄错了），似乎没有办法重置 text-overflow 特性，或者“关闭它”。为了模仿这种“关闭”功能， :hover她们能将 white-space 特性重新增设为 normal。这 text-overflow 是有效的，即使依赖于它才能正常运行。
你晓得吗？ 您还能指定自己的字符串，该字符串应用于代替省略号。这种做将呈现字符串以表示剪切的文档。
8.柔性盒数学模型
灵巧的 盒子数学模型最终将让她们摆脱那些肮脏的东西floats。尽管须要花费许多精力来如是说新特性，但一旦您这种做了，这一切都应该是完全合理的。
让她们构建一个快速演示，并建立一个单纯的两列产业布局。
<div id=“container”><font></font> <font></font> <div id=“main”> Main content here </div><font></font> <aside>Aside content here</aside><font></font> <font></font> </div>现在对 CSS：她们首先须要指示 container 将 box. 我还将应用一个通用的长度和度，即使她们没有任何实际的内容在播放。
#container {<font></font> width: 600px;<font></font> height: 450px; /* just for demo */<font></font> <font></font> background: #e3e3e3;<font></font> margin: auto;<font></font> <font></font>display: flex;<font></font> }接下来，让她们为演示应用独特的背景颜色到 #main div, 和 aside.
#main { <font></font> background: yellow;<font></font> } <font></font> <font></font> aside {<font></font> background: red;<font></font> }在这一点上，没有太多可看的。
不过，值得注意的一点是，当增设为 display: flex mode 时，子原素将占据所有横向空间；这是默认 align-items 值： stretch.
观察当她们在 #main内容区域明确声明长度时会发生什么。
#main {<font></font> background: yellow;<font></font> width: 400px;<font></font> }嗯，这有点好，但她们依然有那个问题， aside 没有占用所有剩余空间。她们能通过使用新 box-flex 特性来解决那个问题。
flex 指示原素占用所有可用空间。
aside { <font></font> display: block; /* cause is HTML5 element */<font></font> background: red;<font></font> <font></font> /* take up all available space */<font></font> flex: 1; <font></font> }有了那个特性，无论 #main 内容区域的长度如何， aside都将消耗每个规格的可用空间。更好的是，您不必担心那些讨厌的float 问题，例如原素落在主要内容区域下方。
她们在这里只触及了表面。要 如是说有关 Flexbox 的更多信息，请查看她们的完整指南！现在所有主流应用程序都支持此功能，您能预期它能在超过 99% 的设备上正常工作。
9.resize
该 resize 特性（CSS3 UI 模块的一部分）允许您指定如何调整 a textarea的大小。现在除了 IE 和 iOS Safari 之外，所有主流应用程序都支持它。
<textarea name=“elem” id=“elem” rows=“5” cols=“50”></textarea>请注意，默认情况下， webkit 应用程序和 Firefox 4 允许 textareas 在横向和水准方向调整大小。
textarea { resize: vertical; }可能将的值
both：横向和水准调整大小horizontal: 将调整大小限制为水准vertical: 限制横向调整大小none：禁用调整大小10.过渡
也许 CSS3 最令人兴奋的新增功能是能够将动画应用于原素，而无需使用 JavaScript。
让她们模拟一个常见的效果，一旦您将链接悬停在侧边栏中，文档将略微向右滑动。
HTML
<ul><font></font> <li><font></font> <a href=“#”> Hover Over Me </a><font></font> </li><font></font> <li><font></font> <a href=“#”> Hover Over Me </a><font></font> </li><font></font> <li><font></font> <a href=“#”> Hover Over Me </a><font></font> </li><font></font> <li><font></font> <a href=“#”> Hover Over Me </a><font></font> </li><font></font> </ul>CSS
ul a {<font></font> border-left: 10px orange solid;<font></font> transition: border-width 0.4s;<font></font> }<font></font> <font></font> a:hover {<font></font>border-width: 20px;<font></font> }<font></font>transition 将接受三个参数：
要转换的特性。all （假如须要，将此值增设为 ）持续时间缓动型她们不直接将 应用 transition 到 hover 锚标记的状态的原因是，假如这种做，动画只会在鼠标悬停时生效。在鼠标移出时，原素将立即返回其初始状态。
即使她们而已增强了效果，所以她们绝对没有对旧应用程序造成任何伤害。
最终项目
让她们结合她们在本文中学到的大部分技术，为显示翻转卡片建立一个简洁的效果。
第 1 步.标记
她们会保持单纯；在她们的 .box 容器中，她们将添加两个 divs：一个用于正面，另一个用于背面。
<body><font></font> <font></font> <div class=“box”><font></font> <div>Hello</div><font></font> <div> World </div><font></font> </div><font></font> <font></font> </body>关键步骤 2. 水准和横向德博瓦桑县
接下来，我希望她们的卡片在屏幕上完全德博瓦桑县。有鉴于此，她们将借助灵巧盒数学模型。
由于她们的页面将只包含这张卡片，她们能有效地使用该body 原素作为她们的包装器。
body, html { height: 100%; width: 100%; } <font></font> <font></font> body {<font></font> display: flex;<font></font> align-items: center;<font></font>justify-content: center;<font></font> }关键步骤 3. 为盒子造型
她们现在将样式化她们的“卡片”。
.box {<font></font> background: #e3e3e3;<font></font> border: 1px dashed #666;<font></font> margin: auto;<font></font> width: 400px;<font></font>height: 200px;<font></font> cursor: pointer;<font></font> position: relative;<font></font> transition: all 1s;<font></font> }请注意，她们还指示此原素 侦听原素 状态的任何更改。当它们发生时，她们将在一秒钟 ( ) 的过程中转换更改（假如可能将transition: all 1s）。
第 4 步。有效的阴影
接下来，正如她们在本文后面所如是说的，她们将通过使用 ::after 伪类来应用一个很酷的阴影。
.box::after {<font></font> content: “”;<font></font>position: absolute;<font></font> width: 70%;<font></font> height: 10px;<font></font> bottom: 0;<font></font>left:15%;<font></font> z-index: -1;<font></font> box-shadow: 0 9px 20px rgba(0, 0, 0, 0.4);<font></font> }div关键步骤 5. 为孩子设计造型
此刻，孩子 div们还在彼此的正上方。让 position 她们绝对，并指示她们占用所有可用空间。
.box > div {<font></font> position: absolute;<font></font> width: 100%;<font></font> height: 100%;<font></font> top: 0;<font></font> left: 0;<font></font> background: #e3e3e3;<font></font> transition: all 0.5s ease-in-out;<font></font> <font></font>font: 45px/200px bold helvetica, arial, sans-serif;<font></font> text-align: center;<font></font>text-shadow: 0 1px 0 white;<font></font> }关键步骤 6. 固定正面
参考上图；注意她们卡片的背面是如何默认显示的？这是即使，由于原素在标记中出现的位置较低，因此它会收到较高的 z-index. 让她们解决那个问题。
/* Make sure we see the front side first */<font></font>.box > div:first-child {<font></font> position: relative;<font></font> z-index: 2;<font></font> }关键步骤 7. 旋转卡片
现在是有趣的部分; 当她们将鼠标悬停在卡片上时，它应该翻转并显示卡片的背面。为了达到那个效果，她们使用了转换和rotateY 函数。
.box:hover {<font></font> transform: rotateY(180deg);<font></font> }关键步骤 8. 镜像文档
这看起来不是很棒吗？但，现在，文档似乎是镜像的。这当然是即使她们改造了容器。div 让她们也通过将孩子旋转180 度来抵消这一点 。
.box:hover > div:first-child {<font></font> opacity: 0;<font></font> }<font></font> <font></font>.box:hover div:last-child {<font></font> transform: rotateY(180deg);<font></font> }使用最后一点标识符，她们早已实现了整洁的效果！
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
PC端项目开发（1个）终端WebApp开发（2个）多端响应式开发（1个）共4大完整的项目开发 ！一行一行标识符带领实践开发，实际企业开发怎么做她们是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目标识符的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目标识符规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，终端端，多端响应式开发项目开发
真机调试，云服务部署上线；Linux环境下 的 Nginx 部署，Nginx 性能优化；Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；企业项目域名跳转的终极解决方案，多网站、多系统部署；使用 使用 Git 在线项目部署；那些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌控企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
假如你没有添加助理老师微信，能添加下方微信，说明要参加30天挑战学习计划，来自今日头条！老师会邀请你进入学习，并给你发放相关资料。
30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程
