**圆角、阴影、文本图像处理、CSS 函数

TIP

CSS 圆角边框、椭圆边框，盒子阴影、文本阴影，文本溢出显示省略号，opacity 透明度，filter 滤镜，object-fit 图片裁剪，防止拖拽文本域，calc 函数，var 函数详细解读和最佳实践

一、圆角¶

TIP

border-radius 用来设置元素的（4 个方向）外边框 1/4 圆角效果。

圆角类型	描述	举例
圆角边框	当使用一个半径时，确定一个圆表示四个不同方向上边框圆角的半径大小	border-radius: 50px;
椭圆边框	当使用两个半径时，确定一个椭圆两半径用反斜杆 / 分隔第一个值是椭圆水平半径，第二个值是椭圆垂直半径	border-radius: 50px / 30px;

**注:

圆角效果：就是这个椭圆或圆与边框的交集形成的 1/4 圆角效果

1、圆角边框¶

/* 四个方向上圆角的半径为 50px */
border-radius: 50px;

<style>
.box {
  width: 100px;
  height: 100px;
  border: 2px solid skyblue;
}
.circle {
  width: 100px;
  height: 100px;
  background-color: khaki;
  /* 上右下左 4 个方向边框的圆角半径大小 50px */
  border-radius: 50px;
  /* 上右下左 4 个方向边框的圆角半径大小 30px */
  /* border-radius:30px; */
}
</style>
<body>
<div class="box">
  <div class="circle"></div>
</div>
</body>

.circle 的 border-radius:50px 时效果	.circle 的 border-radius:30px;时效果
![[Pasted image 20260301102655.png]]	![[Pasted image 20260301102700.png]]

2、椭圆边框¶

/* 
x表示椭圆水平半径
y表示椭圆垂直半径
*/
border-radius: x/y;
/* 
20px 表示椭圆水平半径
50px 表示椭圆垂直半径
*/
border-radius: 80px/100px;

1 ew1

注:¶

四个方向（左上角，右上角，左下角，右下角）上的圆角效果，就是 border-radius 属性确定的圆与对应边框相切形成的 1/4 的圆角效果。

.oval 的 border-radius:80px/100px;	.oval 的 border-radius:40px/80px
![[Pasted image 20260301102844.png]]	![[Pasted image 20260301102850.png]]

3、圆角边框 - border-radius 4 种不同值写法¶

属性值	举例	说明
单值写法	`border-radius:50px;`	表示上右下左四个方向的圆角半径
双值写法	`border-radius:30px 50px;`	第一个值表示左上角和右下角；第二个值表示右上角和左下角
三值写法	`border-radius:30px 50px 80px;`	第一个值表示左上角；第二值表示右上角和左下角；第三值表示右下角
四值写法	`border-radius:10px 20px 30px 40px;`	四个值，分别表示左上角、右上角、右下角、左下角

单值写法¶

/* 四个方向的圆角半径为 50px */
border-radius: 50px;

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  /* 四个方向的圆角半径为 50px */
  border-radius: 50px;
}
</style>
<body>
<div class="box"></div>
</body>

![[Pasted image 20260301102944.png]] **双值写法

/* 
    30px 表示左上角和右下角 圆角半径
    50px 表示右上角和左下角 圆角半径
*/
border-radius: 30px 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
            30px 表示左上角和右下角 圆角半径
            50px 表示右上角和左下角 圆角半径
        */
    border-radius: 30px 50px;
  }
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260301103055.png]] **三值写法

/* 
    30px 表示左上角 圆角半径
    10px 表示右上角和左下角 圆角半径
    50px 表示右下角 圆角半径
*/
border-radius: 30px 10px 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
            30px 表示左上角 圆角半径
            10px 表示右上角和左下角 圆角半径
            50px 表示右下角 圆角半径
        */
    border-radius: 30px 10px 50px;
  }
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260301103137.png]]

**四值写法

/* 
    10px 表示左上角 圆角半径
    20px 表示右上角 圆角半径
    30px 表示右下角 圆角半径
    50px 表示左下角 圆角半径
*/
border-radius: 10px 20px 30px 50px;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 
            10px 表示左上角 圆角半径
            20px 表示右上角 圆角半径
            30px 表示右下角 圆角半径
            50px 表示左下角 圆角半径
        */
    border-radius: 10px 20px 30px 50px;
  }
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260301103220.png]]

4、椭圆边框 - border-radius 4 种不同值写法¶

TIP

反斜杠前面的值表示椭圆水平半径，后面的值表示椭圆的垂直半径。

属性值	举例	描述
单值写法	`border-radius:50px/30px;`	50px 表示四个不同方向椭圆水平半径；30px 表示四个不同方向椭圆垂直半径
双值写法	`border-radius:10px 20px / 30px 50px;`	左上角和右下角，椭圆水平半径 10px，垂直半径 30px；右上角和左下角，椭圆水平半径 20px，垂直半径 50px
三值写法	`border-radius:30px 50px 60px /20px 30px 50px;`	左上角椭圆水平半径 30px，垂直半径 20px；右上角和左下角椭圆水平半径 50px，垂直半径 30px；右下角椭圆水平半径 60px，垂直半径 50px
四值写法	`border-radius:10px 20px 30px 40px/40px 30px 20px 10px;`	左上角、右上角、右下角、左下角椭圆的水平半径为 10px 20px 30px 40px；左上角、右上角、右下角、左下角椭圆的垂直半径为 40px 30px 20px 10px

单值写法

/*
    30px 表示四个不同方向上椭圆水平半径
    50px 表示四个不同方向上椭圆垂直半径  
*/
border-radius: 30px/50px;

![[Pasted image 20260301103335.png]] **双值写法

/*
    30px 表示左上角和右下角 椭圆水平半径
    50px 表示右上角和左下角 椭圆水平半径
    80px 表示左上角和右下角 椭圆垂直半径
    100px 表示右上角和左下角 椭圆垂直半径
*/
border-radius: 30px 50px / 80px 100px;

![[Pasted image 20260301103409.png]] 三值写法

/*
    左上角椭圆水平半径30px ,垂直半径20px
    右上角和左下角椭圆水平半径 50px，垂直半径30px
    右下角椭圆水平半径60px ，垂直半径50px
*/
border-radius: 30px 50px 60px /20px 30px 50px;

![[Pasted image 20260301103441.png]]

**四值写法

/* 
    左上角，右上角，右下角，左下角椭圆的水平半径为 10px 20px 30px 40px
    左上角，右上角，右下角，左下角椭圆的垂直半径为 40px 30px 20px 10px
*/
border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;

![[Pasted image 20260301103510.png]]

5、border-radius 的值百分比表示法¶

TIP

百分比 % 是相对于当前元素的可视宽和可视高而言
水平半径相当于元素的可视宽而言：水平半径 = (width + padding + border) * 百分比
垂直半径相当于元素的可视高而言：垂直半径 = (height + padding + border) * 百分比

/* 
如果元素的宽为100px 高为200px 内边距为50px
则 20%，换算后，
椭圆水平半径=(100px + 50px*2)*20%=40px 
椭圆垂直半径=(200px+50px*2)*20%=60px 
*/
border-radius: 20; 

/* 
如果元素的宽为100px 高为200px
则 20%，换算后，
椭圆水平半径为 100px*20%=20px 
椭圆垂直半径为 200px*20%=40px 
*/
border-radius: 20%;

/*
计算得到
椭圆水平半径=400 * 20%=80px
椭圆垂直半径=200 * 20%=40px
*/
border-radius: 20%;

<style>
.box {
  width: 400px;
  height: 200px;
  background-color: pink;
  /* 
  计算得到
  椭圆水平半径=400 * 20%=80px
  椭圆垂直半径=200 * 20%=40px
  */
  border-radius: 20%;
}
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260301103548.png]]

5.1、绘制圆形¶

![[Pasted image 20260301103756.png]]

元素本身是一个正方形四个方向圆角的直径为正方形边长

<style>
  .circle {
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius: 50%;
  }
</style>
<body>
  <div class="circle"></div>
</body>

5.2、绘制半圆¶

![[Pasted image 20260301103841.png]] 元素本身是一个长方形，宽与高的比为 2：1 左上角和右上角圆的半径=高

<style>
  .Semicircle {
    width: 200px;
    height: 100px;
    background-color: red;
    /* border-radius: 100px 100px 0 0; */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
</style>
<body>
  <div class="Semicircle"></div>
</body>

6、单独设置四个方向圆角-小属性¶

属性	描述	举例
`border-top-left-radius`	左上角	`border-top-left-radius:20px;`
`border-top-right-radius`	右上角	`border-top-right-radius:20px 30px;`
`border-bottom-left-radius`	左下角	`border-bottom-left-radius:10%;`
`border-bottom-right-radius`	右下角	`border-bottom-right-radius:10% 20%;`

小属性主要是用来层叠大属性的

<style>
.box {
  /* 宽 */
  width: 100px;
  height: 100px;
  background-color: tomato;
  /* 4个方向圆角半径为50px */
  border-radius: 50px;
  /* 左上角圆角半径20px */
  border-top-left-radius: 20px;
}
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260301103936.png]]

7、浏览器前缀¶

设置圆角效果的 border-radius属性及小属性都需要添加浏览器兼容性前缀

.element {
  -webkit-border-radius: 10px; /* Chrome, Safari, 旧版 Android/iOS */
  -moz-border-radius: 10px; /* Firefox 3.6及以下 */
  border-radius: 10px; /* 标准语法 */
}

.element {
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px; /* 注意这里不同 */
  border-top-left-radius: 5px;

  /* 其他角同理 */
}

二、box-shadow 盒子阴影¶

TIP

box-shadow给盒子添加阴影效果，阴影是不占空间的

box-shadow: [inset] x偏移 y偏移 [模糊半径] [扩散半径] 颜色;

注:¶

[]方括：表示这个值可以省略不写
inset：表示内阴影，当需要设置内阴影时，才添加
x 偏移：阴影在 x 轴（水平）方向偏移量；值为正，表示阴影向右偏移；值为负，表示阴影向左偏移
y 偏移：阴影在 Y 轴（垂直）方向偏移量；值为正，表示阴影向下偏移；值为负，表示向阴影向上偏移
模半径（应为“模糊半径”）：值只能是 >=0的值，表示阴影的模糊半径
扩散半径：取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大。
颜色：表示阴影的颜色

1、简单阴影¶

默认情况下，元素的阴影与元素本身一样大小

box-shadow: x偏移 y偏移 颜色;

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 50px auto;
  /* 盒子阴影： x偏移量 y偏移量 阴影颜色 */
  box-shadow: 20px 20px #ddd;
}
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260301104037.png]]

2、带模糊的阴影¶

语法

box-shadow: x偏移 y偏移 模糊量 颜色;

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 50px auto;
  /*
  60px  x(水平)向右偏移量
  20px  y(垂直)向下偏移量
  10px  阴影模糊量
  red   阴影颜色为红色
  */
  box-shadow: 60px 20px 10px red;
}
</style>
<body>
  <div class="box"></div>
</body>

阴影效果	阴影效果
box-shadow: 0px 0px 10px red;	box-shadow: 60px 20px 10px red;
![[Pasted image 20260301104425.png]]	![[Pasted image 20260301104430.png]]

3、阴影延展¶

语法：

box-shadow: x偏移 Y偏移 模糊半径 [扩散半径] 颜色;

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 50px auto;
    /*
            60px  x(水平)向右偏移量
            20px y(垂直)向下偏移量
            10px 阴影模糊量
            50px 阴影的延展大小（上下左右都延展50px)
            red 阴影颜色
        */
    box-shadow: 60px 20px 10px 50px red;
  }
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260301104510.png]]

4、内阴影¶

TIP

如果没有指定 inset，默认阴影在边框外，即阴影向外扩散。
使用 inset关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内（即使是透明边框）、背景之上、内容之下。

语法：

/* [] 表示可选项 */
box-shadow: [inset] x偏移 y偏移 模糊半径 [扩散半径] 颜色;

示例：

.box {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 50px auto;
  box-shadow: inset 0px 0px 10px 20px red;
}

![[Pasted image 20260301104531.png]]

4、多个阴影¶

TIP

如果一个盒子有多个阴影，则每个阴影之间用 ,（逗号）隔开
当阴影个数 > 1时，阴影应用的顺序为从前到后，第一个指定的阴影在最上面显示。
内阴影不管写在哪个位置，都会在外阴影上面。

语法：

box-shadow: [inset] x偏移 y偏移 模糊半径 [扩散半径] 颜色, [inset] x偏移 y偏移 模糊半径 [扩散半径] 颜色, [inset] x偏移 y偏移 模糊半径 [扩散半径] 颜色;

示例：

<style>
.box {
  width: 100px;
  height: 100px;
  /* 背景颜色为橘黄色 */
  background-color: orange;
  margin: 50px auto;
  /* 左上角和右下角圆角半径为100px */
  border-radius: 100px 0px 100px 0px;
  border: 4px solid tomato;
  /* 红色阴影，红色里面的黄色影阴,最外面的黄色阴影 */
  box-shadow: 0px 0px 10px rgb(251, 9, 9), inset 0px 0px 20px yellow, 0px 0px 10px 30px yellow;
}
</style>
<body>
  <div class="box"></div>
</body>

不同半径的效果	不同半径的效果
border-radius: 70px 0px 70px 0px;	border-radius: 100px 0px 100px 0px;
![[Pasted image 20260301104720.png]]	![[Pasted image 20260301104725.png]]

5、去掉阴影¶

/*
none 为 box-shadow 的默认值，不设置阴影效果
当我们想去掉元素添加的阴影效果时，就可以设置 box-shadow:none;
*/
box-shadow: none;

6、实战案例-纸张效果¶

<style>
.page {
  margin: 50px auto;
  width: 400px;
  height: 600px;
  padding: 20px;
  box-shadow: inset 0 -48px 48px rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    5px 5px 16px rgba(0, 0, 0, 0.3);
}
</style>
<body>
  <div class="page"></div>
</body>

![[Pasted image 20260301104800.png]]

7、浏览器兼容前缀¶

目前所有现代浏览器都支持无前缀写法，所以前缀加不加其实不重要了。

.element {
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Chrome, Safari, 旧版 Android/iOS */
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Firefox 3.5及以下 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 标准语法 */
}