zoukankan      html  css  js  c++  java
  • HTML 学习笔记 CSS样式(边框)

    元素的边框(border)是围绕元素内容和内边距的一条或多条线

    CSS border 属性允许你规定边框的样式 宽度和颜色


    CSS 边框

    在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。
    元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
    每个边框有 3 个方面:宽度、样式,以及颜色。在下面的篇幅,我们会为您详细讲解这三个方面。


    边框与背景
    CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
    CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。


    边框的样式
    样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
    CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。
    例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:

    定义单边样式
    如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
    border-top-style
    border-right-style
    border-bottom-style
    border-left-style
    因此这两种方法是等价的:
    p {border-style: solid solid solid none;}
    p {border-style: solid; border-left-style: none;}

    边框颜色用 border-color 属性来设置 相对应的右 border-top-color border-right-color border-bottom-color border-left-color

    边框的宽度 border-wiath属性来设置 对应的也有四个边框的宽度属性 border-right-weight ......

    例子

    <html>
    <head>
    <style type="text/css">
    p 
    {
    border: medium double rgb(250,0,255)
    }
    </style>
    </head>
    
    <body>
    <p>Some text</p>
    </body>
    
    </html>

    CSS  边框属性

  • 相关阅读:
    网页 js 获取DPI pxTomm
    利用自定义属性实现js点击事件 委托
    鼠标移动div时禁止选中div中的文字的方法
    关于if简写语句优化的方法
    .clearfix::after(清除浮动)
    js 事件委托
    清空共享池
    oracle中scott用户权限不足
    安装完Oracle 12C数据库,scott账户过期,解锁方法
    Vulnhub靶场-Me Tomcat Host 学习笔记
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6186667.html
Copyright © 2011-2022 走看看