圆角边框：用于设置外边框

border-radius：数值；

例如border-radius：10px；

参数可以数值或者百分比

数值越大边框弧度越大（越圆）

原理：（椭）圆与边框的交集形成圆角效果

其他写法：border-radius：10px 15px 20px 25px；

表示的是左上，右上，右下。左下，顺时针排序；

单独设置一个角写发：

border-top-left-radius:10px;

表示的是左上的一个角；

border-bottom-right-radius：15px；

表示的是右下的圆角；其余写发同理；

注意：顺序不可颠倒；如border-left-top-radius：这是错误的。

盒子阴影：

语法：

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

h-shadow: 必需。水平阴影的位置，允许负值。

v-shadow: 必需。垂直阴影的位置，允许负值。

blur：可选。模糊距离。（简单理解就是盒子的虚实）

spread：可选 。阴影尺寸。

color：可选，阴影的颜色，请借阅CSS颜色值。

inset：可选，将外部阴影（outset）改为内部阴影。

注意：

  1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
  2. 盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

语法：

text-shadow : h-shadow v-shadow blur color ;

h-shadow: 必需。水平阴影的位置，允许负值。

v-shadow：必需。垂直阴影的位置，允许负值。

blur：可选，模糊的距离。（简单理解就是文字的虚实）

color：可选，阴影的颜色。

文章目录