zoukankan      html  css  js  c++  java
  • CSS3 边框

    CSS3 边框

    border-radius

    在 CSS3 中,border-radius属性用于创建圆角。

    语法

    border-radius: 1-4 length|% / 1-4 length|%;
    /* 1-4表示至少一个至多4个 */
    /* 1-4分别表示左上角、右上角、右下角和左下角。简单记为顺时针 */
    /* 省略某个角时,它会与对角保持一致 */
    /* 如 */
    border-radius: 10px 5px;
    /* 相当于 */
    border-radius: 10px 5px 10px 5px;
    
    border-radius: 10px 5px 15px;
    /* 相当于 */
    border-radius: 10px 5px 15px 5px;
    
    描述
    length 设置拐角的半径。
    % 使用百分比定义拐角的半径。
    <html>
    <head>
    <style>
        div {
             100px;
            height: 100px;
            border: 2px solid;
            border-radius: 25px;
        }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

    效果如下:

    box-shadow

    在 CSS3 中,box-shadow属性用来添加阴影。

    语法

    box-shadow: h-shadow v-shadow blur spread color inset;
    
    说明
    h-shadow 必需,表示水平阴影相对于元素的偏移位置。当h-shadow大于0时,表示向右偏移,小于0时,向左偏移,等于零时,刚好与元素重合。
    v-shadow 必需,表示垂直阴影相对于元素的偏移位置。当v-shadow大于0时,表示向下偏移,小于0时,向上偏移,等于零时,刚好与元素重合。
    blur 可选,模糊距离,有点类似于羽化,小于0时就不显示了,等于0时没有模糊效果。
    spread 可选,阴影的大小,阴影的面积,大于0时阴影面积大于元素面积,小于0时阴影面积小于元素面积。
    color 可选,阴影的颜色。
    inset 可选,设置inset时,阴影变成内阴影。
    <html>
    <head>
    <style>
        div {
             100px;
            height: 100px;
            box-shadow: 10px 10px 5px #888;
        }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

    效果如下:

    border-image

    在 CSS3 中,border-image属性允许指定一个图片作为边框。

  • 相关阅读:
    存储过程sql拼接
    收集 一个数字转大写金额的方法
    判断打印机是否可用
    TortoiseSVN解决冲突
    特殊符号
    [转]Winform用匿名方法新建线程的方法
    [转]利用SqlBulkCopy快速大批量导入数据(SqlBulkCopy强大)
    DevExpress GridControl使用
    GridView自动调整列宽
    'display','position'和'float'相互关系
  • 原文地址:https://www.cnblogs.com/zhuangshq/p/10144805.html
Copyright © 2011-2022 走看看