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、相關知識

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css定位方式有哪幾種？ Linux課程---10、權限管理（權限有哪幾種） Spring 事務中的隔離級別有哪幾種? Java中什么是常量，都分為哪幾種——常量的定義、分類 Zookeeper 有哪幾種幾種部署模式？ css引入的方式，一共有幾種，分別是哪幾種方式，有什么區別？ CSS選擇器有哪幾種？舉例輕松理解CSS選擇器什么是線程池？有哪幾種創建方式？ MySQL 中有哪幾種鎖？網站攻擊的方式有哪幾種