百科狗-知识改变命运!
--

border - 边界线复合属性 - css 边框

是丫丫呀1年前 (2023-11-21)阅读数 23#技术干货
文章标签属性

border

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值:border-width,border-style,border-color。和所有的简写属性一样,如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对border-image属性的影响,虽然border属性不能设置这个属性,但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性,因此建议使用该属性重置边框设定。

border - 边界线复合属性 - css 边框

注意:虽然border-width,、border-styleborder-color简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色,但boder属性只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。

示例

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;

浏览器支持

浏览器都支持border

语法

border:| | | inherit

取值

  • :请看border-width.
  • :请看border-style.
  • :可以确定border的颜色。如果这个值没有设置,它的默认值是元素的color属性值(是文字颜色而非背景色)。请看border-color.
初始值
  • border-width:
    • border-top-width:medium
    • border-right-width:medium
    • border-bottom-width:medium
    • border-left-width:medium
  • border-style:
    • border-top-style:none
    • border-right-style:none
    • border-bottom-style:none
    • border-left-style:none
  • border-color:
    • border-top-color:currentcolor
    • border-right-color:currentcolor
    • border-bottom-color:currentcolor
    • border-left-color:currentcolor
  • 适用于所有元素,也包括::first-letter
    继承性
    动画性看每个独立属性
    计算值看每个独立属性

    例子

    look at my borders

    you can play with the css below to test properties changes

    .brd { border: 1px solid black;} //CSS .brd { border: 1px solid black; } style { border: 1px dashed black; display:block; }

    鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

    免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

    图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)