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圆角直径

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         div{

             background: #ccc;

             width:128px;

             height:128px;

             /*border-radius:128px;*/

             /*border-radius:20px 50px;*/

             /*border-radius:20px 50px 100px;*/

             border-radius:20px 50px 100px 128px;

         }

     </style>

 </head>

 <body>

     <div>

         <img src="ft.png" alt="">

     </div>

 </body>

 </html>

box-shadow阴影制作

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         div{

             width:128px;

             height:128px;

             box-shadow:0px 0px 0px 0px #999;

         }

     </style>

     <script src='jquery.min.js'></script>

 </head>

 <body>

     <div>

         <img src="ft.png" alt="">

     </div>

 </body>

 <script>

 $('div').mouseenter(function(){

     $(this).css({'box-shadow':'0px 0px 5px 5px #999 inset'});

 });

 $('div').mouseleave(function(){

     $(this).css({'box-shadow':'0px 0px 0px 0px #999 inset'});

 });

 </script>

 </html>

border-image边框图片环绕

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         div{

             width:128px;

             height:128px;

             background: #ccc;

             border:30px solid transparent;

             border-image:url('b.png') 26 26 round;

         }

     </style>

 </head>

 <body>

     <div>

         <img src="ft.png" alt="">

     </div>

 </body>

 </html>