日度归档:2020年6月25日

css border-style属性简介说明


摘要:
下文讲述css相关属性border-style的属性功能说明,如下所示:


css border-style属性功能说明

border-style属性功能:
设置html元素的边框样式

border-style语法:  
border-style:<border-style>{1,4}
    <border-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-style为四个相关属性:
  [border-top-style]||[border-right-style]||[border-bottom-style]||[border-left-style]
none:
    无轮廓,当参数值为none时,border-color将被忽略,border-width计算值为0,除非边框轮廓为图像,即border-image
hidden:
    隐藏边框,IE7及以下尚不支持
dotted:
   点状轮廓,IE6下显示为dashed效果
dashed:
   虚线轮廓
solid:
   实线轮廓
double:
   双线轮廓,两条单线与其间隔的和等于指定的border-width值
groove:
   3D凹槽轮廓
ridge:
   3D凸槽轮廓
inset:
   3D凹边轮廓
outset:
   3D凸边轮廓
border-style相关说明:
 如输入四个参数值,将按上、右、下、左的顺序作用于四边
 如输入一个值,则应用于四条边
 如输入两个,则第一个用于上、下,第二个用于左、右
 如输入三个参数,则第一个用于上,第二个用于左、右,第三个用于下
border-style属性注意事项:
   当Border-width设置为0时,则border-style失去其应用的作用

border-style示例说明:

<meta charset="utf-8" />
<style>
div{
 margin:5px;
 width:100px;
 }
.none{padding:10px;border:0 none;background:#eee;}
.hidden{padding:10px;border:3px hidden #000;background:#eee;}
.dotted{padding:10px;border:3px dotted #000;background:#eee;}
.dashed{padding:10px;border:3px dashed #000;background:#eee;}
.solid{padding:10px;border:3px solid #000;background:#eee;}
.double{padding:10px;border:3px double #000;background:#eee;}
.groove{padding:10px;border:3px groove #000;background:#eee;}
.ridge{padding:10px;border:3px ridge #000;background:#eee;}
.inset{padding:10px;border:3px inset #000;background:#eee;}
.outset{padding:10px;border:3px outset #000;background:#eee;}
</style>
<p>
 maomao365.com<br />
 border-style示例说明
</p>
<hr />
<div class="none">none</div>
<div class="hidden">hidden</div>
<div class="dotted">dotted</div>
<div class="dashed">dashed</div>
<div class="solid">solid</div>
<div class="double">double</div>
<div class="groove">groove</div>
<div class="ridge">ridge</div>
<div class="inset">inset</div>
<div class="outset">outset</div>
css  border-style属性简介说明

css
border-style属性简介说明

css border-width属性简介说明


摘要:
下文讲述css相关属性border-width的属性功能说明,如下所示:


css border-wdith属性功能说明

border-width属性功能:
设置边框的宽度,此参数不允许设置为负值

border-width语法:  
border-width:<border-width>{1,4}
    <border-width> = <length> | thin | medium | thick
border-width为四个相关属性:
   [border-top-width]||[border-right-width]||[border-bottom-width]||[border-left-width]
length:
   长度值指边框的宽度,不允许负值
medium:
   默认厚度的边框---为3px
thin:
   比默认厚度细的边框---1px
thick:
   比默认厚度粗的边框---5px
border-width相关说明:
 如输入四个参数值,将按上、右、下、左的顺序作用于四边
 如输入一个值,则应用于四条边
 如输入两个,则第一个用于上、下,第二个用于左、右
 如输入三个参数,则第一个用于上,第二个用于左、右,第三个用于下

border-width示例说明:

<meta charset="utf-8" />
 <style>
.one{padding:10px;
border-width:1px;
border-style:solid;
border-color:#000;}
.two{margin-top:10px;
padding:10px;
border-width:1px 5px;
border-style:solid;
border-color:#000 #f00;}
.three{margin-top:10px;
padding:10px;
border-width:1px 5px 10px;
border-style:solid;
border-color:#000 #f00 #090;}
.four{margin-top:10px;
padding:10px;
border-width:1px 5px 10px 15px;
border-style:solid;
border-color:#000 #f00 #090 #0ff;}
</style>

<p>
maomao365.com <br />
border-width提供不同参数个数示例
</p>
<hr />

<div class="one">1个参数值</div>
<div class="two">2个参数值</div>
<div class="three">3个参数值</div>
<div class="four">4个参数值</div>
css border-width示例分享

css border-width示例分享

如何使用css代码将一个元素相对另一个元素进行“相对定位”呢?


摘要:
下文讲述css实现相对定位的方法分享,如下所示:

实现思路:
    1.父元素中使用
       position:relative;
    2.子元素中使用
       position: absolute;
    即可实现子元素相对父元素定位

例:
将divChild相对于divParent进行相对定位

<meta charset='utf-8' />
<style>
 #divParent{
	width:180px;height:180px;
	background-color:green;
	position:relative;
}
#divChild{
	width:20px;height:20px;
	background-color:red;
	position:absolute;
	right:20px;
    top:40px;
}
</style>
<p>
maomao365.com <br />
将divChild相对于divParent进行相对定位
</p>
<hr />
<div id="divParent">
	<div id="divChild"></div>
</div>
代码相关说明:
    position:absolute;
     绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素)。
     当元素没有已定位的祖先元素,则它的位置则是相对于最初的包含块(body)
      
     绝对定位本身与文档流的渲染无关,不占用Html控件,绝对定位元素可覆盖到其它元素之上,此时我们可以使用z-index控制元素的显示顺序
     
     position:relative;
    相对定位:相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上(即不设置position时的位置,然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动;
    
    相对定位占用html空间,不会覆盖在其它元素之上
css相对定位的示例分享

css相对定位的示例分享