• css3背景、边框、和补丁相关属性


    border :基本语法

    border: border-width || border-style || border-color 默认值为: medium none 。

    border-color 的默认值将采用文本颜色

    相关属性:

    border-top,border-left,border-right,border-bottom:它们分别对边框的某个方向起作用,语法基本与border相同

    border-bottom-color,border-top-color,border-bottom-color,border-right-color:分别设置某个边框的颜色:

    例如border-bottom-color:red设置下边框的颜色为红色

    border-bottom-width,border-top-width,border-bottom-width,border-right-分别设置某个边框的宽度:

    基本语法:border-bottom-width : medium | thin | thick | length 其中length由浮点数字和单位标识符组成的长度值。不可为负值,例如border-bottom-width :thin;

    border-bottom-style,border-top-style,border-bottom-style,border-right-style:分别设置某个边框的样式:

    基本语法:border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 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凸边

    CSS3.0新增: 设置圆角: border-radius : none | <length>{1,4} [ / <length>{1,4} ]?

    相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值:

    <length>: 由浮点数字和单位标识符组成的长度值。不可为负值。

    border-top-left-radius: 由浮点数字和单位标识符组成的长度值。不可为负值。

    说明:第一个值是水平半径。如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。 如果任意一个值为0,则这个角是矩形,不会是圆的。 值不允许是负值。

    例如: border-radius :4px;

    边框对象颜色: border-color : <color>

    相关属性 :border-top-color, border-right-color, border-bottom-color , border-left-color 设置对象边框的颜色。

    使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。

    例如针对上例中的边框设置为4px,颜色可以设置为4中不同的颜色 border-color:#555 #666 #777 #888

    边框背景图片: border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

    相关属性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image,border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image 取值:none: 默认值。无背景图。

    <image>: 使用绝对或相对 url 地址指定背景图像。

    <number>: 边框宽度用固定像素值表示。

    <percentage>: 边框宽度用百分比表示。 [ stretch | repeat | round ]: 拉伸 | 重复 | 平铺 (其中stretch是默认值。)

    border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;

    设置边框阴影: box-shadow:<length> <length> <length> <length> || <color>

    相关属性:text-shadow 取值:<length> <length> <length>? <length>? || <color>: 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色 box-shadow:5px 2px 6px #000

  • 相关阅读:
    tcp没用吗?为什么MOBA、“吃鸡”游戏不推荐用tcp协议
    这样做动画交互,一点都不费力!
    sql server 小记——分区表(上)
    vs中不得不会的一些小技巧(1)——细说查找
    Aforge.net之旅——开篇:从识别验证码开始
    Redis Hash操作
    Varint 数值压缩
    LevelDB Version
    LevelDB Cache机制
    LevelDB Compaction操作
  • 原文地址:https://www.cnblogs.com/yhq361/p/4207407.html
Copyright © 2020-2023  润新知