CSS边框属性一---border-radius

2022-03-25 22:49:37

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。

码农公寓