如何利用HTML5和CSS3设置四边边框border边界线

html-css07

如何利用HTML5和CSS3设置四边边框border边界线,第1张

直接用css属性值设置边线：border即可，还可以单独设置border-left，right，bottom，top。

用ccs3中的盒阴影设置，是一种固定写法： box-shadow：1px 1px red,inset 1px 1px red.

<div id="banner">

<p>

fdb4e1

</p>

</div>

CSS中的代码:

#banner {

width:850px

height:200px

border:2px solid #ccc

background:#CCC

}

代码写错了，当然没有效果了，border 有三个参数用来设置 线宽，样式，颜色，中间不能有冒号

消除边框的有几种，如下：

此为消除标签元素自带的一些边距:

margin:0 padding:0

此为消除标签元素自带的一些边线:

border:none

border-left:none//消除左边线

border-right:none//消除右边线

border-top:none//消除上边线

border-bottom:none//消除下边线

像图片中的样式要利用层级关系，让大框在小框下面被遮挡，再消除小框架的右边线：

.a{  width:100px height:100px background-color:#eee position:relative border:1px solid #ff0707 border-right:none margin-top:300px  }

.b{  width:300px height:300px z-index:-1 background-color:#eee position:absolute left:99px top:-100px border:1px solid #ff0707  }