宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

文章目录

  • 一、文本阴影
  • 二、盒子阴影
  • 三、边框圆角弧度border-radius

一、文本阴影

text-shadow:0px -10px 1px red,0px 10px 1px yellow;

参数:水平方向阴影位移 垂直方向阴影位移 模糊程度 阴影颜色
支持多参数

二、盒子阴影

box-shadow:10px 10px 5px 10px blue inset;

参数:水平方向阴影位移 垂直方向阴影位移 模糊距离 阴影大小 阴影颜色 内阴影

模糊距离 阴影大小 阴影颜色 内阴影 均为可选参数
内阴影,一般不用,可不加

三、边框圆角弧度border-radius

border-radius:10px;
px 或者 百分比
v1 四个角一样
v1,v2 左上右下,左下右上
v1,v2,v3 左上,左下右上,右下
v1,v2,v3,v4 左上,右上,右下,左下 顺时针

拆分属性:

border-top-left-radius:10px 左上
border-bottom-left-radius:20px 左下
border-top-right-radius:10px 右上
border-bottom-right-radius:20px 右下

特殊用法:

border-radius:30/60px;水平方向走30px,垂直方向走60px
border-radius:10px 20px 30px 40px/50px 60px 70px 80px; 各个角度不一样

常用用法:

border-radius:50%;对于正方形设置50%为圆,不需要去计算长度了
border-radius:20px;设置长方向的边角弧度时设置固定值。