zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    toj 2975 Encription
    poj 1797 Heavy Transportation
    toj 2971 Rotating Numbers
    zoj 2281 Way to Freedom
    toj 2483 Nasty Hacks
    toj 2972 MOVING DHAKA
    toj 2696 Collecting Beepers
    toj 2970 Hackle Number
    toj 2485 Card Tric
    js页面定位,相关几个属性
  • 原文地址:https://www.cnblogs.com/yhq361/p/4207407.html
Copyright © 2011-2022 走看看