10.css盒子模型-边框常用写法及简写

html-css011

10.css盒子模型-边框常用写法及简写,第1张

为元素设置边框

要为一个元素设置边框必须指定三个样式

border-width:边框的宽度

border-color:边框颜色

border-style:边框的样式

和宽度一样,color也提供四个方向的样式,可以分别指定颜色

可选值:

style也可以分别指定四个边的边框样式,规则和width一致,

同时它也提供border-xxx-style四个样式,来分别设置四个边

示例:

边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色

而且没有任何的顺序要求

border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效

div+css中层的边框大小可以设置的,我们需要给这个div,width和height,然后在使用border来实现对边框的操作,boder:4px solid #f00它的意思就是边框的宽度是4px,实线的,颜色是红色的,我们通过代码来理解下:

<html>

<head>

<style>

#div1{ //通过id实现

width:300px

height:30px

border:10px solid #f00

marign:0 auto

}

</head>

<body>

<div id='div1' class='div1'>

<p>我的位置</p>

</div>

</body>

</html>

举报