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