css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css3新增边框、阴影、背景、文本、字体</title> 7 <style type="text/css"> 8 /*border-radius:边框圆角 圆角直径*/ 9 div#ceshi{ 10 width: 200px; 11 height: 200px; 12 background-color: #f90; 13 margin-bottom: 50px; 14 /* border-radius: 50%; 15 border-radius: 200px; */ 16 border-radius: 1px 10px 30px 70px;/*顺时针*/ 17 border-radius: 1px 10px 30px;/*对角线*/ 18 border-radius: 1px 10px; 19 border-radius: 10px; 20 } 21 22 /*#ceshi{ 23 box-shadow: 10px 20px 30px 10px purple inset; 24 }*//*X偏移 Y偏移 阴影模糊值 阴影往外延伸 阴影颜色 内阴影*/ 25 #ceshi{ 26 box-shadow: 10px 20px 30px 10px red; 27 } 28 29 /* border-image:url('') X y round/repeat/stretch 30 边框图片环绕/平铺/拉伸 */ 31 div.box{ 32 width: 128px; 33 height: 128px; 34 background-color: #ccc; 35 margin: 0 auto; 36 border:30px solid transparent; 37 /* border-image:url('images/b.png') 20 20 round; */ 38 border-image-source:url('images/b.png'); 39 border-image-slice: 20; 40 border-image-width: 10; 41 border-image-outset:1; 42 border-image-repeat:round; 43 margin-bottom: 100px; 44 } 45 46 /*背景样式background-size*//*background-origin背景图大小和位置*/ 47 .pic{ 48 width: 400px; 49 height: 300px; 50 border: 10px solid red; 51 background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1314383665,2282288429&fm=11&gp=0.jpg) no-repeat; 52 background-size: 50%;/*容器宽度乘百分比为背景图大小*/ 53 background-origin: border-box;/*边框区域*/ 54 background-origin: padding-box;/*内边框区域*/ 55 background-origin: content-box;/*有效区域*/ 56 } 57 58 /*文本字体*/ 59 .text{ 60 text-shadow: 5px 1px 2px red;/*文本阴影*/ 61 width: 400px; 62 border: 1px inset green; 63 margin-top: 50px; 64 word-break: break-all;/*单词折行*/ 65 word-wrap: break-word; 66 font-family: dhnblog; 67 } 68 69 /*自定义字体类型*/ 70 @font-face{ 71 font-family:dhnblog; 72 src:url('images/fzm.ttf'); 73 } 74 </style> 75 <script> 76 window.onload=function(){ 77 var obj=document.getElementById('ceshi') 78 obj.onclick=function(){ 79 console.log('音乐不能阻碍工作,是为了更好的服务工作') 80 } 81 } 82 </script> 83 </head> 84 <body> 85 <div id="ceshi"></div> 86 <div class="box"> 87 <img src="images/ft.png" alt=""> 88 </div> 89 <div class="pic"> 90 今日の天気は良い今日の天気は良い今日の天気は良い今日の天気は良い 91 </div> 92 <div class="text"> 93 <p>Once the sea was difficult for the waterExcept Wushan is not a cloudYou are to me the sea and Wushan 94 </p> 95 <p>海が水にとって困難だったら武山は雲ではないことを除いてあなたは私にとって海と武山です</p> 96 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 97 <p>Maybe program apes are not good at words, and warmth is hidden in the cold and the heat inside, but those seemingly cold codes can also be combined into the most romantic and beautiful love words. Today we take a look at how programmers put love words into romance. Code.</p> 98 </div> 99 </body>100 </html>
联系客服