css border特性的应用方式和技能

日期:2021-03-04 类型:科技新闻 

关键词:自助建站免费建站平台,网站的建设服务,自助建站平台,如何自己建网站,怎么建设网站

CSS border用于设定HTML元素(如div)的边框,包含边框的宽度、色调和款式。本文章内容向码农详细介绍CSS border边框特性详尽內容,感兴趣爱好的码农能够参照1下。

CSS 边框即CSS border-border边框款式色调、边框款式、边框宽度的英语的语法构造与运用实例实例教程篇

1、CSS边框基本专业知识

CSS 边框即CSS border是操纵目标的边框边线宽度、色调、虚线、实线等款式CSS特性。另外大伙儿能够进到码农实例教程出示CSS手册查询border。

2、Html初始边框与CSS边框对比

Html报表操纵边框:

CSS Code拷贝內容到剪贴板
  1. border="1" bordercolor="#000000"    

表明:操纵报表边框宽度为1px,css色调为黑色,默认设置为实线款式边框。

3、border边框英语的语法

1、4个边框

border-left 设定左侧框,1般独立设定左侧框款式应用

border-right 设定右侧框,1般独立设定右侧框款式应用

border-top 设定上边框,1般独立设定上边框款式应用

border-bottom 设定下边框,1般独立设定下边框款式应用,有时可将下边框款式做为css下划线实际效果运用。

2、4边同样边框border简写

CSS Code拷贝內容到剪贴板
  1. #manong{border:1px solid #00F}    

设定了manong目标盒子1px像素蓝色实线边框

3、边框3个款式

一般大家能够对边框设定宽度(厚度)、边框款式、边框色调这3个特性与主要参数。

1)、边框色调:border-color:#000

2)、边框厚度(宽度):border-width:1px

应用数据+企业设定边框厚度宽度,如1px(边框厚度宽度为1像素),边框务必为正数据,超过0的标值。不然设定边框border款式失效。

3)、border边框款式:border-style:solid

边框款式值以下:

none :  无垠框。与任何特定的border-width值不相干
hidden :  掩藏边框。IE不适用
dotted :  在MAC服务平台上IE4+与WINDOWS和UNIX服务平台上IE5.5+为点线。不然为实线(常见)
dashed :  在MAC服务平台上IE4+与WINDOWS和UNIX服务平台上IE5.5+为虚线。不然为实线(常见)
solid :  实线边框(常见)
double :  双线边框。两条单线与期间隔的和等于特定的border-width值
groove :  依据border-color的值画三d凹槽
ridge :  依据border-color的值画菱形边框
inset :  依据border-color的值画三d凹边
outset :  依据border-color的值画三d凸边

4、CSS独立设定左侧框、右侧框、上边框、下边框

以缩写方法写上、下、左、右侧框独立CSS款式设定方式

1、1px黑色虚网上边框

border-top:1px dashed #000

2、1px黑色实线下推广边框

border-bottom:1px solid #000

3、1px黑色虚线左侧框

border-left:1px dashed #000

4、1px黑色实线右侧框

border-right:1px solid #000

5、常见强烈推荐边框款式

大家一般应用流行访问器适配边框款式有:

1、实线边框:solid

Border:1px solid #000 设定目标1px(像素)宽厚的黑色实线边框。

2、虚线边框:dashed

Border:1px dashed #000 设定目标1px(像素)宽厚的黑色虚线边框。

6、css border边框用途

设定目标边框款式,设定独立上边框、下边框、左侧框、右侧框款式,完成清理美观大方。边框起到切分、整体规划合理布局功效。

7、css边框运用实例编码

叙述:以便观查实例实际效果大家设定1个css宽度为200px,css高宽比1px,鲜红色实线边框的DIV盒子

CSS编码:

CSS Code拷贝內容到剪贴板
  1. #manong{height:100px;width:200px;border:1px solid #F00}  

HTML编码对应片断:

CSS Code拷贝內容到剪贴板
  1. <div id="manong">我的高宽比为100px,宽度为200px</div>    

8、css边框border总结

大家应用CSS设定边框border款式,1般大家应用简写表述式开展设定目标边框border款式,这样节省编码简化编码功效。不管是独立设定1个边的边框還是4边边框,大家都尽可能缩写方法简写CSS边框编码,CSS 边框提升简写,普遍对目标设定CSS款式应用特性编码:border:1px solid #000;。

9、css边框border设定技能

如上下下有边框而且款式为黑色1PX宽度实线边框,而上边沒有边框。

CSS 编码:

CSS Code拷贝內容到剪贴板
  1. border:1px solid #000border-top:none;    

留意border:1px solid #000; 和border-top:none;前后左右次序不可以替换。由于CSS载入有从上到下、从左到右载入基本原理,而先设定了全部边框款式,后再再加申明顶部上边边框为“none”沒有意思,即完成该案例要的款式。从而不用各自设定下、左、右,从而节省1定编码。

以上这篇css border特性的应用方式和技能便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/myhomepages/p/5502319.html

上一篇:巧用box 返回下一篇:没有了