css入门(五)—— 边框样式

1. 概述
    A. 任何块元素和行内元素都可以设置边框
    B. 如果元素要显示边框,必须同时设置以下三个属性才可以:border-width(边框宽度)、border-style(外观)、border-color(边框颜色)。
2. border-width(边框宽度)
    A. 该属性值要设置为像素值,即xxpx(20px等)。
3. border-style(外观)
    A. 该属性可以取以下值:
        none:无样式
        hidden:与“none”相同
        solid:实线
        dashed:虚线
        dotted:点线
        double:双线,双线的宽度加上中间的空隙宽度等于border-width值
        inset:内凹(3D样式)
        outset:外凸(3D样式)
        ridge:脊线(3D样式)
        groove:槽线(3D样式)
    B. 除了solid和dashed,其他取值都不常用
4. border-color
    A. 该属性值可以设置为关键字(red、green等),也可以设置为rgb数值(#3EF0A4)。
e.g. <head>
        <title>边框</title>
        <style type="text/css">
            input {
                border-width: 6px;
                border-style: solid;
                border-color: red;
            }
        </style>
    </head>

    <body>
        <input type="button" value="点击一下" />
    </body>
5. 边框的简洁写法
    e.g. <head>
            <title>边框</title>
            <style type="text/css">
                input {
                    /* border-width、border-style和border-color这三个属性不分顺序 */
                    border: green 6px solid;
                }
            </style>
        </head>

        <body>
            <input type="button" value="点击一下" />
        </body>
6. 边框局部样式
    A. 指上边框、下边框、左边框和右边框的样式。
    B. border-top/bottom/left/right-width、border-top/bottom/left/right-style、border-top/bottom/left/right-color。
    C. 简洁写法为border-top/bottom/left/right

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值