zoukankan      html  css  js  c++  java
  • CSS边框属性一---border-radius

    1、CSS outline 属性

      outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    p
      {
      outline:#00FF00 dotted thick;
      }

     2、CSS border-radius 属性

      border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

      例子1:一个参数的时候

    border-radius:2em;

      等价于

    border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;

      如图:

      例子2:两个参数的时候

    border-radius:2em 5em;
    /*左上角和右下角为2em圆弧,右上角和左下角为5em圆弧*/

      等价于

    border-top-left-radius:2em;
    border-top-right-radius:5em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:5em;

      如图:

      例子3:三个参数的时候

    border-radius:2em 5em 8em;
    /*左上角为2em圆弧,右上角和左下角为5em圆弧,右下角为8em圆弧*/

      等价于

    border-top-left-radius:2em;
    border-top-right-radius:5em;
    border-bottom-right-radius:8em;
    border-bottom-left-radius:5em;

      如图:

      例子4:四个参数的时候

    border-radius: 2em 1em 5em 4em;

      等价于

    border-top-left-radius: 2em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 5em;
    border-bottom-left-radius: 4em;

      如图:

      例子5:带斜杠 / 的时候

    border-radius: 2em 1em 5em 4em / 0.5em 3em 2em 4em;
    /*以斜杠 / 分开后面的参数的意思是:第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径,这样可以画一个不对称的圆角辣*/

      等价于

    border-top-left-radius: 2em 0.5em;
    border-top-right-radius: 1em 3em;
    border-bottom-right-radius: 5em 2em;
    border-bottom-left-radius: 4em 4em;

      如图:

      通常我们很少写斜杠 / 右边的参数,那就是默认右边等于左边的值。你也可以省略一些值,比如这样子写

    border-radius: 2em 1em 4em / 0.5em 3em;

      解析顺序你就可以按照上面的自己推算一下啦。

    3、CSS border-shadow 属性

      box-shadow 属性向框添加一个或多个阴影。

      语法:

    box-shadow: h-shadow v-shadow blur spread color inset;

      注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

    描述
    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊距离。
    spread 可选。阴影的尺寸。
    color 可选。阴影的颜色。请参阅 CSS 颜色值。
    inset 可选。将外部阴影 (outset) 改为内部阴影。
  • 相关阅读:
    linux 上安装sqlplus
    如何使用 SVN 找到一段时间内提交的代码文件
    nginx 快速检查配置文件的方法
    nginx 报错 [emerg] 1164#1664: bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
    nginx 负载均衡
    C#可扩展编程之MEF学习
    5天玩转C#并行和多线程编程
    C#综合揭秘——深入分析委托与事件
    解析C#中[],List,Array,ArrayList的区别及应用
    在easyui datagrid中formatter数据后使用linkbutton
  • 原文地址:https://www.cnblogs.com/hu555snow/p/5711373.html
Copyright © 2011-2022 走看看