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>