css3-10 css3中的边框样式有哪几种
一、总结
一句话总结：1.border-radius 2. box-shadow 3.border-image三种，box一种border两种
1、css3中的边框样式有哪几种？
1.border-radius 2. box-shadow 3.border-image三种，box一种border两种
边框样式(新加):
1.border-radius
值为圆的直径
2.box-shadow
box-shadow:0px 0px 0px 0px #999;
1)5px x偏移
2)5px y偏移
3)5px 阴影模糊值
4)5px 阴影外延值
5)#999 阴影的颜色
6)inset 内阴影
3.border-image
border-image:url('b.png') 26 26 round;
border-image:url('b.png') 26 26 stretch;
border-image:url('b.png') 26 26 repeat;
2、如何把图形变成圆的？
border-radius设置成和圆的直径一样大
13 width:128px;
14 height:128px;
15 /*border-radius:128px;*/
3、border-radius的原理是什么？
角上面 四个小圆在上面截
设置成圆的时候四个角上的圆重合了
18 border-radius:20px 50px 100px 128px;
4、如何用border-radius设置好看的图案？
注意上下左右，调整各自位置的截圆的直径
16 /*border-radius:20px 50px;*/
5、边框阴影的关键词是什么？
box-shadow
注意是box不是boder
6、box-shadow的6个参数是什么意思？
box-shadow:0px 0px 0px 0px #999;
1)5px x偏移
2)5px y偏移
3)5px 阴影模糊值
4)5px 阴影外延值
5)#999 阴影的颜色
6)inset 内阴影
7、如何设置鼠标点一下样式改变？
js实现，jquery实现，点一下触发事件
click方法a，还要什么mouseenter，mouseleave方法啊
24 <script>
25 $('div').mouseenter(function(){
26 $(this).css({'box-shadow':'0px 0px 5px 5px #999 inset'});
27 });
28
29 $('div').mouseleave(function(){
30 $(this).css({'box-shadow':'0px 0px 0px 0px #999 inset'});
31 });
32 </script>
8、如何设置边框为图片？
边框预留位置给图片，边框一定要预留位置，预留多大位置，边框图片就会显示多大，而且还要设置边框透明。
border:5px solid transparent;
border-image:url(http://images.cnblogs.com/cnblogs_com/Renyi-Fan/1188097/o_carton13.jpg) 20 20 stretch;
二、css3中的边框样式有哪几种
1、相关知识
边框样式(新加):
1.border-radius
值为圆的直径
2.box-shadow
box-shadow:0px 0px 0px 0px #999;
1)5px x偏移
2)5px y偏移
3)5px 阴影模糊值
4)5px 阴影外延值
5)#999 阴影的颜色
6)inset 内阴影
3.border-image
border-image:url('b.png') 26 26 round;
border-image:url('b.png') 26 26 stretch;
border-image:url('b.png') 26 26 repeat;
2、代码
border-radius圆角直径
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 div{ 12 background: #ccc; 13 width:128px; 14 height:128px; 15 /*border-radius:128px;*/ 16 /*border-radius:20px 50px;*/ 17 /*border-radius:20px 50px 100px;*/ 18 border-radius:20px 50px 100px 128px; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <img src="ft.png" alt=""> 25 </div> 26 </body> 27 </html>
box-shadow阴影制作
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 div{ 12 width:128px; 13 height:128px; 14 box-shadow:0px 0px 0px 0px #999; 15 } 16 </style> 17 <script src='jquery.min.js'></script> 18 </head> 19 <body> 20 <div> 21 <img src="ft.png" alt=""> 22 </div> 23 </body> 24 <script> 25 $('div').mouseenter(function(){ 26 $(this).css({'box-shadow':'0px 0px 5px 5px #999 inset'}); 27 }); 28 29 $('div').mouseleave(function(){ 30 $(this).css({'box-shadow':'0px 0px 0px 0px #999 inset'}); 31 }); 32 </script> 33 </html>
border-image边框图片环绕
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 div{ 12 width:128px; 13 height:128px; 14 background: #ccc; 15 border:30px solid transparent; 16 border-image:url('b.png') 26 26 round; 17 } 18 </style> 19 </head> 20 <body> 21 <div> 22 <img src="ft.png" alt=""> 23 </div> 24 </body> 25 </html>