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) 改为内部阴影。
  • 相关阅读:
    WEB-INF目录与META-INF目录的作用
    Spring中的jar包详解
    fatal: Could not read from remote repository.的解决办法
    如何解决failed to push some refs to git
    Spring Boot 集成servlet,发布为可直接运行的war包,方便后续打包为docker镜像。
    使用IntelliJ IDEA,gradle开发Java web应用步骤
    git 命令使用常见问题
    自己动手搭建Git服务器-Gitblit
    windows 安装git
    springMVC 接收数组参数,mybatis 接收数组参数,mybatis批量插入/批量删除案例
  • 原文地址:https://www.cnblogs.com/hu555snow/p/5711373.html
Copyright © 2011-2022 走看看