CSS3

发布时间：2019-08-26 07:16:59编辑：auto阅读（1686）

http://caniuse.com/
1、私有前缀及其用法
.round{
-khtml-border-radius: 10px; / Konqueror /
-rim-border-radius: 10px; / RIM /
-ms-border-radius: 10px; / Microsoft /
-o-border-radius: 10px; / Opera /
-moz-border-radius: 10px; / Mozilla (如 Firefox) /
-webkit-border-radius: 10px; / Webkit (如 Safari 和 Chrome) /
border-radius: 10px; / W3C /
}

2、快速而有效的 CSS3 技巧
通过相邻兄弟选择器 将 div下一个p更改为 红色字体
div.s1+p
div+p
通过通用兄弟选择器 将 div后所有的p 背景改为 #ccc色
div~p

△CSS3 多栏布局
column-width: 12em;或column-count: 4;
#main {
column-gap: 2em;
column-rule: thin dotted #999;
column-width: 12em;
}

△文字换行
word-wrap: break-word;

△CSS3 属性选择器
img[alt="atwi_oscar"] {
border: 3px dashed #e15f5f;
}
匹配开头：Element[attribute^="value"]
匹配包含内容：Element[attribute*="value"]
匹配结尾：Element[attribute$="value"]

属性] : 具备 指定属性 的所有元素全部匹配出来
元素[属性] : 匹配具备 属性的 指定元素
p[id] : 匹配具备id属性的p元素
div[class] :
元素[属性1][属性2] :
p[id][class] : 匹配出所有即具备id属性，又具备class属性的p元素
元素[属性=值] :
input[type="text"] : 匹配type的值为text的input元素
元素[属性~=值] :
input[class ~= second] :
<input class="first second" />
<input class="myseconddiv" />

    ~= : 包含指定的数据（独立）
    =  : 只有指定的数据
   元素[属性^=值] : 匹配指定属性以指定值开始的指定元素
      p[class^=f] : 匹配class以f开始的p元素
  <p class="first"></p>可以匹配
  <p class="fast"></p>可以匹配
  <p class="second"></p>不能匹配
   元素[属性*=值] : 属性包含值元素
      p[class*="valid"];
  <p class="myvalid"></p>
   元素[属性$=值] : 匹配属性以指定值结束的元素
   元素[属性!=值] : 匹配属性不等于具体值得元素

△CSS3 结构伪类
① :last-child 选择器
② :nth-child 选择器
:nth-child(even)
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:nth-child(3n+1) ——这样会从第一个元素开始，然后每三个元素选一个
③ :not() 否定选择器 /nav ul li:not(.class) a { color: #fe0208; }/

△对伪元素的修正
p::first-line
p::first-letter

△自定义网页字体
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-
opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

△新的 CSS3 颜色格式和透明度
RGBA
HSLA：HSL模式基于一个 360°的色相环，H代表色相，60°时为×××，120°时为绿色，180°时为青色，240°时为蓝色，300°时为洋红色，360°时为红色。

3、文字阴影
△HEX、HSL 或 RGB 颜色都可以
text-shadow: 4px 4px 0px #404442;
text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
text-shadow: 4px 4px 0px rgba(64, 68, 66, 0.4);

△px、em 或 rem 都行
△制作浮雕文字阴影效果：text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);
△多重文字阴影：text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;

4、盒阴影
box-shadow: 0px 3px 5px #444444;

△内阴影：box-shadow:inset 0 0 40px #000000;
△多重阴影

5、背景渐变
△线性渐变 background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);
△径向背景渐变 background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);
? closest-side ：（渐变形状是圆形时）以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最近的水平或垂直边为渐变半径。
? closest-corner ：以距离中心点最近的一角为渐变半径。
? farthest-side ：和 closest-side 正好相反，（渐变形状是圆形时）以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最远的水平或垂直边为渐变半径。
? farthest-corner ：以距离中心点最远的一角为渐变半径。
? cover ：和 farthest-corner 完全一样。
? contain ：和 closest-side 完全一样。
△重复渐变
background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
background: repeating-radial-gradient(2px 2px, ellipse,
hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px,
hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);
△背景渐变图案
body {
background-color:white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,
hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,
transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,
hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,
transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}
CSS 高手 Lea Verou 收集了一系列 CSS3 背景渐变图案，具体请见 http://lea.verou.me/css3patterns/

6、多重背景图片
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png') left bottom, black;

△背景图片大小 background-size: 100% 50%, 300px 400px, auto;
? auto ：使用图片的原始大小；
? cover ：按照原始图片的长宽比缩放图片以填充整个元素区域；
? contain ：按照原始图片的长宽比缩放图片以使其较长的一边适应元素大小。
△背景图片位置

7、可缩放图标：响应式设计中的完美选择
△请见 http://fico.lensco.be/

CSS3 过渡、变形和动画

1、过渡 transition: all 1s ease 0s;
△transition-property ：要过渡的 CSS 属性名称（比如 background-color 、△text-shadow 或者 all ，使用 all 则过渡会被应用到每一个可能的 CSS属性上）；
△transition-duration ：定义过渡效果持续的时间（时间单位为秒，比如 .3s 、 2s或 1.5s ）；
△transition-timing-function ：定义过渡期间速度如何变化（比如 ease 、 linear 、ease-in 、 ease-out 、 ease-in-out 或 cubic-bezier ）；
△transition-delay ：可选，用于定义过渡开始前的延迟时间。相反，将该值设置为一个负数，可以让过渡效果立即开始，但过渡旅程则会从半路开始。

• {
  transition: all 1s;
  }

2、变形
? scale ：用来缩放元素（放大或缩小） transform: scale(1.7);
? translate ：在屏幕上移动元素（上下左右四个方向）transform: translate(40px, 0px);
? rotate ：按照一定角度旋转元素（单位为度） transform: rotate(90deg)
? skew ：沿 X和 Y轴对元素进行斜切 transform: skew(10deg, 2deg);
? matrix ：允许你以像素精度来控制变形效果 transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
矩阵变形工具（matrix）http://www.useragentman.com/matrix/
? transform-origin：移动变形的中心点 transform: rotate(45deg);transform-origin: 20% 20%;

3、3D 变形
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="img/goonies.jpg" alt="The Goonies" />
</div>
<div class="face back"><h5>HOT!</h5></div>
</div>
</section>
<style>
.Qcontainer {
height: 100%;
width: 28%;
position: relative;
-webkit-perspective: 800;①
float: left;
margin-right: 2%;
}
.film {
width: 100%;
height: 15em;
-webkit-transform-style: preserve-3d;②
-webkit-transition: 1s;
}
.Qcontainer:hover .film {
-webkit-transform: rotateY(180deg);③
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;④
}
.back {
width: 66%;
height: 127%;
-webkit-transform: rotateY(180deg);⑤
background: #3b3b3b;
background: -webkit-linear-gradient(top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 100%);
padding: 15%;
}
</style>
①-webkit-perspective: 200; 在父级元素上设置透视（透视声明只会应用到其第一个子元素上）：透视的值越大，就表示你的视点与 3D场景之间的景深越大
②-webkit-transform-style: preserve-3d; （为了延续父元素的透视） 这样可以设置一个 3D场景
③-webkit-transform: rotateY(180deg); 当鼠标悬停在 .Qcontainer 模块上时，我们给 .film 这个 div添加一个翻转效果
④-webkit-backface-visibility: hidden; 用来处理当海报翻转之后隐藏在其背面内容
⑤-webkit-transform: rotateY(180deg); 不加这句的话， .back 这个 div就会显示在正面海报之上

为非Webkit核心浏览器提供一个合理的降级方案：
.front {z-index: 5;}
.Qcontainer:hover .front {z-index: 0;}
.front {z-index: 5;}
.Qcontainer:hover .front {z-index: 0;}

4、CSS3 动画效果
@keyframes warning { /定义了一个 @keyframes （关键帧）声明
0%{text-shadow:0px 0px 4px #000;}
50%{text-shadow:0 0 40px #000;}
100%{text-shadow:0 0 4px #000;}
}
.back h5{font-size:4em;text-align:center;animation: warning 1.5s infinite ease-in;} /在动画属性中引用它

animation-name: warning;
animation-duration: 1.5s;
animation-timing-function: ease-in-out; /调速函数
animation-iteration-count: infinite; /infinite 让动画连续循环播放
animation-play-state: running; /控制动画的播放和暂停
animation-delay: 0s; /动画开始前的延时
animation-fill-mode: none;

用 HTML5 和 CSS3 征服表单

1、HTML5 表单
placeholder
required
autofocus
autocomplete="off"
list（及对应的 datalist 元素）
email
number
url
tel
search
pattern
color
date
month
week
time
datetime 和 datetime-local
range

2、使用 CSS3 美化 HTML5 表单
input:not([type="range"]), textarea, select{/样式/}
针对表单的 CSS3 伪类选择器
input:required ：选择必填表单域；
input:focus:invalid ：选择当前聚焦的且含有非法输入值的表单域；
input:focus:valid ：选择当前聚焦的且含有合法输入值的表单域。

解决跨浏览器问题

渐进增强与优雅降级
Modernizr是一个用于检测浏览器功能的开源JavaScript库

关键字：