CSS3

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库

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3 转换(Transform)

    在CSS中,允许元素实现 2D 和 3D的转换效果,主要包含 :旋转,缩放,移动,倾斜        

    py3study
  • 3D盒子动画

    ---------------------------------------------------------

    py3study
  • CSS3学习3----举例

    《2》。对于绝对定位:对于上面的浮动的div1,div2,div3,我们还可以通过绝对定位对其进行设置。如:

    py3study
  • golang学习之beego框架配合easyui实现增删改查及图片上传

    demo目录: ? upload文件夹主要放置上传的头像文件,main是主文件,所有效果如下: 主页面: ? 具体代码: <!DOCTYPE html> <ht...

    用户1141560
  • Css3新特性应用之视觉效果

    一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sah...

    sam dragon
  • 纯css抖动效果

    ProsperLee
  • [Markdown]Sublime Text2配置成MarkdownPad2效果

    原文链接:http://blog.csdn.net/humanking7/article/details/43516903

    祥知道
  • WordPress美化-缩略图&整站添加圆角、边框、阴影

    我觉得自己的审美是在一直在变化的,总是感觉还会有更好的效果。那就要不断的更改尝试。

    AlexTao
  • 利用autocomplete.js实现仿搜索效果(ajax动态获取后端[C#]数据)

    实现功能描述: 1、实现搜索框的智能提示 2、第二次浏览器缓存结果 3、实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://...

    纯粹是糖
  • css绘图,实现一些特殊形状

    还是和前面的tips一样,多用after和before,能省俩标签!俩!比如这一堆的形状 <!DOCTYPE HTML> <html> <head> <met...

    练小习

扫码关注云+社区

领取腾讯云代金券