HTML5-盒子的使用


 

一.

 

 

 

  border-color

  border-width

  border-style

屬性用法遵循順時針順序。

border-top-

border-left-

border-bottom-

border-right-

a>border-width:值;

 

thin

medium

中等

thick

粗的
像素值 14px

 

 

 

 

 

 

b>border-style:

 
none
hidden 隱藏
dotted 點線
dashed 虛線
splid 實線
double 粗線

 

 

 

 

 

c>border-color:#000000;

 

 

border整體使用順序:

border: width style color;

2.margin-top:

 margin-right:

 margin-bottom:

 margin-left:

居中語法 margin:0 auto;

<1>使用在塊元素中

<2>用於固定寬度

3.padding-top:

 padding-right:

 padding-bottom:

 padding-left:

二.盒子的尺寸

box-sizing:content_box | border_box | inherit ;

content_box內容寬默認值

border_box 盒子的寬度或高度等於元素內容的寬度或高度。

inherit 元素繼承父元素的盒子模型模式

 

三.圓的寫法:

border-radius:20px 10px 50px 30px;

圓的方向設置按照順時針,左上,右上,右下,左下。

四.盒子的陰影

box-shadow:inset  x-offset  y-offset  blur-radius   color;

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM