zoukankan      html  css  js  c++  java
  • CSS border边框属性教程(color style)

    CSS 边框CSS border-border边框样式颜色、边框样式、边框宽度的语法结构与应用案例教程篇

    一、CSS 边框基础知识   -   TOP

    CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入DIVCSS5提供CSS手册查看border手册:http://www.divcss5.com/shouce/c_border.shtml
    DIV+CSS边框border知识教程篇

    二、Html原始边框与DIV+CSS边框对照   -   TOP

    Html表格控制边框:
    border="1" bordercolor="#000000"
    说明:控制表格边框宽度为1px,css颜色为黑色,默认为实线样式边框。

    三、border边框语法   -   TOP

    1、四个边框
    border-left 设置左边框,一般单独设置左边框样式使用
    border-right 设置右边框,一般单独设置右边框样式使用
    border-top 设置上边框,一般单独设置上边框样式使用
    border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

    2、四边相同边框border简写
    #divcss5{border:1px solid #00F}
    设置了divcss5对象盒子1px像素蓝色实线边框

    3、边框三个样式
    通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。

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

    2)、边框厚度(宽度):border-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的值画3D凹槽
    ridge :  根据border-color的值画菱形边框
    inset :  根据border-color的值画3D凹边
    outset :  根据border-color的值画3D凸边

    4)、边框样式截图:

    css border边框样式效果图
    边框border-style样式效果图

    四、CSS单独设置左边框、右边框、上边框、下边框   -   TOP

    以缩写方式写上、下、左、右边框单独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

    五、常用推荐边框样式   -   TOP

    我们通常使用主流浏览器兼容边框样式有:

    1、实线边框:solid
    Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。

    2、虚线边框:dashed
    Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。

    六、css border边框用处   -   TOP

    设置对象边框样式,设置单独上边框、下边框、左边框、右边框样式,实现美化美观。边框起到分割、规划布局作用。

    七、border边框样式优化简写图文教程   -   TOP

    border css样式语法结构分析图
    CSS border边框属性语法结构分析图(简写优化的边框border)

    八、css边框应用案例代码   -   TOP

    描述:为了观察案例效果我们设置一个css宽度为200px,css高度1px,红色实线边框的DIV盒子

    CSS代码
    #divcss5{height:100px;200px;border:1px solid #F00}

    HTML代码对应片段:
    <div id="divcss5">我的高度为100px,宽度为200px</div>

    九、css border边框案例截图   -   TOP

    border边框应用案例截图
    边框border样式应用示范案例截图

    十、css边框border总结   -   TOP

    我们使用DIV CSS设置边框border样式,一般我们使用简写表达式进行设置对象边框border样式,这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框,我们都尽量缩写方式简写CSS边框代码,CSS 边框优化简写,常见对对象设置CSS样式使用属性代码:border:1px solid #000;。

    十一、三边有边而一边没有设置技巧   -   TOP

    如左右下有边框并且样式为黑色1PX宽度实线边框,而上边没有边框。

    CSS 代码: border:1px solid #000; border-top:none;
    注意border:1px solid #000; 和border-top:none;前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。从而无需分别设置下、左、右,从而节约一定代码。

  • 相关阅读:
    suse12安装详解
    Centos7上部署openstack mitaka配置详解(将疑难点都进行划分)
    菜鸟帮你跳过openstack配置过程中的坑[文末新添加福利]
    openstack中dashboard页面RuntimeError: Unable to create a new session key. It is likely that the cache is unavailable.
    Multiple network matches found for name 'selfservice', use an ID to be more specific.报错
    查看 SELinux状态及关闭SELinux
    SELinux深入理解
    IP地址、子网掩码、网络号、主机号、网络地址、主机地址
    Oracle job procedure 存储过程定时任务
    POI文件导出至EXCEL,并弹出下载框
  • 原文地址:https://www.cnblogs.com/jerrypro/p/6777741.html
Copyright © 2011-2022 走看看