CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的(代码展示css3浏览器前缀)
1 <!DOCTYPE html> 2 <html lang="zh" 3 head 4 meta charset="UTF-8" 5 name="viewport" content="width=device-width,initial-scale=1.0" 6 http-equiv="X-UA-Compatible"="ie=edge" 7 title>css3浏览器前缀</ 8 style type="text/css" 9 table{ 10 border: 1px solid #ccc; 11 border-spacing50px;/*表格边框之间的距离*/ 12 border-collapse collapse表格边框是否合并13 } 14 tr,td,th15 border 1px solid #CCCCCC16 text-align center17 padding 5px18 19 style20 21 body22 table23 tr24 th>前缀25 >浏览器26 27 28 td>-webkit29 >chrome和safari30 31 32 >-moz33 >firefox34 35 36 >-ms37 >IE38 39 40 >-o41 >opera42 43 44 45 html>
CSS3实现的文字特效代码,修改参数观察变化
1 2 3 4 5 6 7 >CSS3实现的文字特效 8 9 body 10 background#000 11 12 h1 13 text-aligncenter 14 color#fff 15 font-size48px 16 font-family 'Fruktur',cursive 17 text-shadow 1px 1px 1px #ccc, 18 0 0 10px #fff,1)"> 19 0 0 20px #fff,1)"> 20 0 0 30px #fff,1)"> 21 0 0 40px #ff00de,1)"> 22 0 0 70px #ff00de,1)"> 23 0 0 80px #ff00de,1)"> 24 0 0 100px #ff00de,1)"> 25 0 0 150px #ff00de 26 27 transform-style preserve-3d 28 -moz-transform-style 29 -webkit-transform-style; 30 -ms-transform-style; 31 -o-transform-style 32 33 34 animation run ease-in-out 9s infinite 35 -moz-animation run ease-in-out 9s infinite 36 -webkit-animation 37 -ms-animation 38 39 -o-animation 40 41 42 @keyframes run 43 0% { 44 transformrotateX(-5deg) rotateY(0) 45 46 50% 47 rotateX(0) rotateY(180deg) 48 text-shadow 49 50 0 0 20px #fff,1)"> 51 0 0 30px #fff,1)"> 52 0 0 40px #3EFF3E,1)"> 53 0 0 70px #3EFFff,1)"> 54 0 0 80px #3EFFff,1)"> 55 0 0 100px #3EFFee,1)"> 56 0 0 150px #3EFFee 57 58 59 100% 60 rotateX(5deg) rotateY(360deg) 61 62 } 63 64 @-moz-keyframes run 65 66 -moz-transform 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 @-webkit-keyframes run 87 88 -webkit-transform 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 @-ms-keyframes run 109 110 -ms-transform111 112 113 114 115 116 117 118 119 120 121 122 123 124 h1>学习源于兴趣和压力,不抛弃不放弃125 126 >
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。