css3 圆角、边框、文字阴影、盒阴影
1.rgba颜色值（红，绿，蓝，透明）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>rgba</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 background: rgba(0,0,0,0.2); 11 position: absolute; 12 } 13 </style> 14 </head> 15 <body> 16 <div></div> 17 的所发生的咖啡机 18 </body> 19 </html>
2.圆角border-radius ，border-radius有8个参数，前面4个是横坐标，后面4个是纵坐标，x1,x2,x3,x4/y1,y2,y3,y4;x1是左上角横坐标，x2是右上角横坐标，x3是右下角横坐标，x4是左下角横坐标；y1,y2,y3,y4同理。
2.1利用border-radius绘制圆形
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>圆形</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 background: #ccc; 11 border-radius: 100px; 12 } 13 </style> 14 </head> 15 <body> 16 <div></div> 17 </body> 18 </html>
2.2椭圆
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>椭圆</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 100px; 10 border-radius: 100px/50px; 11 /*border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;这个是完整写法*/ 12 background: #ccc;/*缩写*/ 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
2.3 弧形
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>弧形</title> 6 <style type="text/css"> 7 div{ 8 width: 0; 9 border-bottom: 100px solid #ccc; 10 border-top: 100px solid #ccc; 11 border-left: 100px solid #ccc; 12 border-right: 100px solid transparent; 13 border-radius: 100px; 14 } 15 </style> 16 </head> 17 <body> 18 <div></div> 19 </body> 20 </html>
2.4其他
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>其他</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 border-top-left-radius: 50px; 11 background: #ccc; 12 } 13 </style> 14 </head> 15 <body> 16 <div></div> 17 </body> 18 </html>
3、文字阴影 text-shadow:x偏移 y偏移 模糊度 阴影颜色；
3.1、模糊字（添加文字阴影，设置文字的颜色透明，隐藏文字，只留阴影）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>模糊字</title> 6 <style type="text/css"> 7 div{ 8 text-shadow: 0 0 10px yellow; 9 color: rgba(0,0,0,0); 10 font-size: 50px; 11 font-weight: bold; 12 } 13 </style> 14 </head> 15 <body> 16 <div>的所发生的咖啡机</div> 17 </body> 18 </html>
3.2、发光字(从文字到外面的模糊度越来越模糊，颜色也跟着改变)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>发光字</title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 div{ 11 text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 30px #f00,0 0 50px #f00; 12 font-size: 50px; 13 font-weight: bold; 14 color: #fff; 15 } 16 </style> 17 </head> 18 <body> 19 <div>的所发生的咖啡机</div> 20 </body> 21 </html>
3.3浮雕
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>浮雕</title> 6 <style type="text/css"> 7 body{ 8 background: #ccc; 9 } 10 div{ 11 text-shadow: -1px -1px 0 #fff,1px 1px 0 #333; 12 font-size: 50px; 13 font-weight: bold; 14 color: #fff; 15 } 16 </style> 17 </head> 18 <body> 19 <div>的所发生的咖啡机</div> 20 </body> 21 </html>
3.4文字内陷（内阴影）
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>文字内阴影</title> 6 <style type="text/css"> 7 div{ 8 background-color: #444; 9 font-size: 50px; 10 font-weight: bold; 11 text-shadow: 1px 1px 0 #999, 0 0 0 #000; 12 color: rgba(0, 0, 0, 0.5); 13 } 14 </style> 15 </head> 16 <body> 17 <div> 18 CSS3 內阴影文字效果 19 </div> 20 </body> 21 <html>
3.5描边
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>文字描边</title> 6 <style type="text/css"> 7 div{ 8 font-size: 50px; 9 font-weight: bold; 10 color: #ccc; 11 text-shadow: 1px 1px 0 #f00,-1px -1px 0 #f00; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 CSS3 文字描边 18 </div> 19 </body> 20 <html>
3.6 3D文字
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>立体文字</title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 div{ 11 font-size: 50px; 12 font-weight: bold; 13 color: #fff; 14 text-shadow:1px 1px 0 rgba(255,255,255,0.7),2px 2px 0 rgba(255,255,255,0.7),3px 3px 0 rgba(255,255,255,0.7),4px 4px 0 rgba(255,255,255,0.7),5px 5px 0 rgba(255,255,255,0.7),6px 6px 0 rgba(255,255,255,0.7); 15 } 16 </style> 17 </head> 18 <body> 19 <div> 20 CSS3 立体文字 21 </div> 22 </body> 23 <html>
3.7 镂空
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>立体文字</title> 6 <style type="text/css"> 7 body{ 8 background: #000; 9 } 10 div{ 11 font-size: 50px; 12 font-weight: bold; 13 color: #000; 14 text-shadow: 1px 1px 0 #fff,-1px -1px 0 #fff; 15 } 16 </style> 17 </head> 18 <body> 19 <div> 20 CSS3 镂空 21 </div> 22 </body> 23 <html>
3.8火焰文字
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>火焰文字</title> 6 <style type="text/css"> 7 8 body{background:#000;color:#fff;} 9 div{ 10 font-size: 100px; 11 line-height: 200px; 12 font-weight: bold; 13 text-shadow:0 0 5px #fff,0 0 20px #fefcc9,10px -10px 30px #feec85,-20px -20px 40px #ffae34,20px -40px 50px #ec760c,-20px -60px 60px #cd4606,0 -80px 70px #973716,10px -90px 80px #451b0e; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 CSS3 火焰文字 20 </div> 21 </body> 22 <html>
4.盒阴影（box-shadow）用法和text-shadow差不多
5.边框背景（border-image）
语法：border-image:url() 10% 10% 10% 10% stretch; 可以使用百分比，也可以使用像素，但是不用带px
数值相同可以简写border-image:url() 10% stretch; 第三个参数可以是 stretch拉伸，repeat重复，round也是重复，但比repeat好的
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框背景</title> <style type="text/css"> div{ height: 400px; width: 380px; border-width: 50px; border-image: url(1.png) 166 round; background: #ccc; } </style> </head> <body> <div></div> </body> </html>
