1.圆角边框border-radius

参数：
：
用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值
：
用百分比定义圆形半径或椭圆的半长轴，半短轴。水平方向百分比参照元素宽度（非内容宽度），垂直方向参照元素高度。不允许负值
原理：
image.png
image.png
image.png
圆形：在正方形的基础上，圆角设置为50%
圆角矩形：在矩形的基础上，将圆角设置为高度的一半。

  • border-radius属性提供 2 个参数，参数间以/分隔，每个参数允许设置 1~4 个参数值，第 1 个参数表示水平半径或半轴，第 2 个参数表示垂直半径或半轴，如第 2 个参数值省略未定义，则直接复制第 1 个参数值。
  • 水平半径或半轴：如果提供全部四个参数值，将按上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left的顺序作用于四个角；提供三个，第一个用于top-left，第二个用于top-right和bottom-left，第三个用于bottom-right；提供两个，第一个用于top-left和bottom-right，第二个用于top-right和bottom-left；只提供一个，将用于全部的四个角。
  • 垂直半径或半轴也遵循以上 4 点。

举个例子：

  1. .demo {
  2.     border: 10px solid black;
  3.     border-radius: 55px 40px 55px 40px;  //依次应用于顺时针左上、右上、右下、左下
  4. }
  6. <div class="demo">
  7. </div>

但是在提供四个参数的时候，只有第一个参数可以用斜杠/设置短轴长，即 55px/25px

.demo {
    border: 10px solid black;
    border-radius: 55px/25px 40px 55px 40px;  //如果在后续的三个参数中加了/，则整个圆角样式失效
  //比如：
  border-radius: 55px 40px/25px 55px 40px;  //在第二个参数40px处加了/，错误 
}

.demo {
    border: 10px solid black;
    border-radius: 55pt/25pt;
}

<div class="demo">
    演示水平、垂直半径或半轴
</div>

image.png
还可以使用独立属性。定义元素的单个圆角。

  • border--radius属性提供 2 个参数，参数间以空格分隔，每个参数允许设置 1 个参数值，第 1 个参数表示水平半径或半轴，第 2 个参数表示垂直半径或半轴，如第 2 个参数值省略未定义，则直接复制第 1 个参数值。以分拆独立属性来实现上例代码： ```css .demo { / 这段代码等同于 border-radius: 55pt/25pt */ border-top-left-radius: 55pt 25pt; border-top-right-radius: 55pt 25pt; border-bottom-right-radius: 55pt 25pt; border-bottom-left-radius: 55pt 25pt; }

```

2.盒子阴影（重要）

盒子阴影（重要）

3.文字阴影

image.png
image.png