css3-10 css3中的边框样式有哪几种

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>