CSS3

原创

木具的 2017-11-29 22:13:26 ©著作权

©著作权归作者所有：来自51CTO博客作者木具的的原创作品，请联系作者获取转载授权，否则将追究法律责任

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 ：选择当前聚焦的且含有合法输入值的表单域。