HTML5&CSS3-充实笔记0505

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

CSS样式与排版

控制边界与边框

从外到里：margin --->  border ---> Padding ---> HTML组件（边界、边框、边界间距、HTML组件）


margin-top:上边界  px/pt/%/auto   auto为默认值

margin-right
margin-bottom
margin-left

四个属性可以写到一起： div { margin: 5px 10px 15px 20px}   上、右、下、左

边框：边框宽度、样式、颜色以及圆角（CSS3新增）

border-style:  none（默认）、solid/double/groove/ridge/inset/outset
border-top-style / border-left-style / border-bottom-style / border-right-style   同border-style属性
border-width:  thin/thick/medium   也可以是宽度值+单位
     border-top/left/bottom/right-width  同 border-width
border-color    一样也有 border-top/left/bottom/right-color
border综合设置  （没有顺序：颜色、边框宽度、边框样式）


border-radius   圆角设置：长度(px) 或百分比（%）
     border-top-left-radius / border-top-right-radius  / border-bottom-left-radius /border-bottom-right-radius

border-image    花边框线：source  slice   width repeat;
eg:　　border-image: url(border.png)  35 25 25 15;

边界间距：

padding是指边框（border）内侧和HTML组件边沿的距离，共有上下左右四边属性
padding-top  / padding-right / padding-bottom / padding-left


padding属性的顺序是： 上、右、下、左。循环往复

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏1 回帖

关键词：HTML5 HTML htm border Adding

[em17]

点赞

border-style:  none（默认）、solid/double/groove/ridge/inset/outset
border-top-style / border-left-style / border-bottom-style / border-right-style   同border-style属性
border-width:  thin/thick/medium   也可以是宽度值+单位
     border-top/left/bottom/right-width  同 border-width
border-color    一样也有 border-top/left/bottom/right-color
border综合设置  （没有顺序：颜色、边框宽度、边框样式）

为您点赞！

好分享，读罢学到很多，谢谢，为您点赞！