1、圆角：border-radius
border-radius 属性可以接受一到四个值。规则如下：
-
四个值 -
border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角） -
三个值 -
border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角） -
两个值 -
border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角） -
一个值 -
border-radius: 15px;（该值用于所有四个角，圆角都是一样的）
CSS 圆角
以下例子实现椭圆：
border-radius: 50%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ellipse {
background-color: #73AD21;
border-radius: 50%;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id="ellipse"></p>
</body>
</html>
运行效果：
2、CSS 边框图像：border-image
CSS 边框图像
3、CSS 多重背景：background-image
background-image: url(imgs/icon_mess_sellorder.png),url(imgs/paper.jpg);- 简写 ：
background: url(imgs/icon_mess_sellorder.png) right bottom no-repeat, url(imgs/paper.jpg) left top repeat;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ex1 {
background-image: url(imgs/icon_mess_sellorder.png),url(imgs/paper.jpg);
background-position:right bottom, left top;
background-repeat:no-repeat, repeat;
/* 简写 */
/* background: url(imgs/icon_mess_sellorder.png) right bottom no-repeat, url(imgs/paper.jpg) left top repeat; */
padding: 15px;
}
</style>
</head>
<body>
<div class="ex1">
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome
to Shanghai!</p>
</div>
</body>
</html>
运行效果：
3.2 CSS 背景尺寸：background-size
background-size: 50px 50px;（单个）background-size: 50px,auto;（多个，用逗号隔开）background-size: contain;
contain关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。background-size: cover;
cover关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。
3.2.1 全尺寸背景图像
html {
background: url(imgs/paper.jpg) no-repeat center fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
background: url(imgs/paper.jpg) no-repeat center fixed;
background-size: cover;
}
</style>
</head>
<body>
<div >
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome
to Shanghai!</p>
</div>
</body>
</html>
运行效果：
3.2.2 Hero Image：带有文本的大图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hero_img {
background-image: url(imgs/paper.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 200px;
position: relative;
}
.hero_text {
position: absolute;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="hero_img">
<div class="hero_text">
<h1>小白与小白花</h1>
<p>回到破产前30天，逆风翻盘</p>
<button>回去</button>
</div>
</div>
<p>逆风大女主</p>
</body>
</html>
运行效果：
3.2.3 背景图像的位置：background-origin
该属性接受三个不同的值：
border-box- 背景图片从边框的左上角开始padding-box-背景图像从内边距边缘的左上角开始（默认）content-box- 背景图片从内容的左上角开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.background_img01 {
border: 1px solid black;
background-image: url(imgs/icon_mess_sellorder.png);
background-repeat: no-repeat;
/* border-box - 背景图片从边框的左上角开始 */
background-origin: border-box;
}
.background_img02 {
border: 1px solid black;
background-image: url(imgs/icon_mess_sellorder.png);
background-repeat: no-repeat;
/* padding-box - 背景图像从内边距边缘的左上角开始（默认） */
background-origin: padding-box;
padding: 30px;
}
.background_img03 {
border: 1px solid black;
background-image: url(imgs/icon_mess_sellorder.png);
background-repeat: no-repeat;
/* content-box - 背景图片从内容的左上角开始） */
background-origin: content-box;
padding: 30px;
}
</style>
</head>
<body>
<div class="background_img01">
<div>
<h1>小白与小白花</h1>
<p>回到破产前30天，逆风翻盘</p>
<button>回去</button>
</div>
</div>
<br>
<div class="background_img02">
<div>
<h1>小白与小白花</h1>
<p>回到破产前30天，逆风翻盘</p>
<button>回去</button>
</div>
</div>
<div class="background_img03">
<div>
<h1>小白与小白花</h1>
<p>回到破产前30天，逆风翻盘</p>
<button>回去</button>
</div>
</div>
</body>
</html>
运行效果：
3.2.4 指定背景的绘制区域：background-clip
该属性接受三个不同的值：
border-box- 背景绘制到边框的外部边缘（默认）padding-box- 背景绘制到内边距的外边缘content-box- 在内容框中绘制背景
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>background-clip 属性</h1>
<p>No background-clip (border-box is default):</p>
<div id="example1">
<h2>Welcome to Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Welcome to Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>Welcome to Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</body>
</html>
运行效果：
4、CSS 颜色
CSS 颜色
5、CSS 渐变
CSS 定义了两种渐变类型：
- 线性渐变（向下/向上/向左/向右/对角线）
- 径向渐变（由其中心定义）
5.1 CSS 线性渐变
- 如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
text-align: center;
top: 50%;
position: relative;
}
#grad1 {
/* 默认从上到下 */
background-image: linear-gradient(red, yellow);
height: 200px;
}
#grad2 {
/* 对角线 */
background-image: linear-gradient(to bottom right, red, yellow);
height: 200px;
}
#grad3 {
/* 从左到右 */
background-image: linear-gradient(to right, red, yellow);
height: 200px;
}
#grad4 {
/* 使用角度 0度*/
background-image: linear-gradient(0deg, red, yellow);
height: 200px;
}
#grad5 {
/* 使用角度 90度*/
background-image: linear-gradient(90deg, red, yellow);
height: 200px;
}
#grad6 {
/* 使用角度 180度*/
background-image: linear-gradient(180deg, red, yellow);
height: 200px;
}
#grad7 {
/* 使用角度 -90度*/
background-image: linear-gradient(-90deg, red, yellow);
height: 200px;
}
#grad8 {
/* 使用多个色标*/
background-image: linear-gradient(green, red, yellow);
height: 200px;
}
#grad9 {
/* 使用透明度*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
height: 200px;
}
#grad10 {
/* 重复线性渐变*/
background-image: repeating-linear-gradient( red, yellow 10%, green 20%);
height: 200px;
}
</style>
</head>
<body>
<div id="grad1"><p>默认 从上到下</p></div>
<br>
<div id="grad2"><p>对角线</p></div>
<br>
<div id="grad3"> <p>从左到右</p> </div>
<br>
<div id="grad4"> <p>使用角度 0度</p></div>
<br>
<div id="grad5"><p>使用角度 90度</p></div>
<br>
<div id="grad6"><p>使用角度 180度</p></div>
<br>
<div id="grad7"><p>使用角度 -90度</p></div>
<br>
<div id="grad8"><p>使用多个色标</p></div>
<br>
<div id="grad9"><p>使用透明度</p></div>
<br>
<div id="grad10"><p>重复线性渐变</p></div>
<br>
</body>
</html>
运行效果：
5.2 CSS 径向渐变
-
径向渐变由其中心定义。
-
如需创建径向渐变，您还必须定义至少两个色标。
CSS 径向渐变
6、CSS 阴影效果
通过使用 CSS，您可以在文本和元素上添加阴影。
在我们的教程中，您将学习如下属性：
text-shadowbox-shadow
6.1 CSS 文字阴影：text-shadow
CSS 阴影效果
6.2 CSS Box Shadow
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div01 {
width: 150px;
height: 150px;
background-color: yellow;
box-shadow: 5px 5px;
}
#div02 {
width: 150px;
height: 150px;
background-color: yellow;
box-shadow: 5px 5px gray;
}
/* 向阴影添加模糊效果 */
#div03 {
width: 150px;
height: 150px;
background-color: yellow;
box-shadow: 5px 5px 10px gray;
}
</style>
</head>
<body>
<div id="div01">
带阴影的块元素
</div>
<br>
<div id="div02">
带阴影+颜色的块元素
</div>
<br>
<div id="div03">
向阴影添加模糊效果
</div>
</body>
</html>
运行效果：
（1）以下示例实现纸卡片效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.card{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header{
background-color: #4CAF50;
color: white;
padding:10px;
font-size: 40px;
}
div.bottom{
padding:10px;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="bottom">
<p>January 1, 2021</p>
</div>
</div>
</body>
</html>
运行效果：
（2）以下示例实现图像卡片效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.card{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.bottom{
padding:10px;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<img src="imgs/paper.jpg" alt="paper" style="width: 100%;">
</div>
<div class="bottom">
<p>January 1, 2021</p>
</div>
</div>
</body>
</html>
运行效果：
7、CSS 文本效果
- 文字溢出：
text-overflow： word-wrapword-breakwriting-mode
7.1 CSS 文字溢出：text-overflow
- CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容
- 属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.textclip {
width: 200px;
text-overflow: clip;
border: 1px solid #333;
overflow: hidden;
/* 强制不换行 */
white-space: nowrap;
}
/* 鼠标放置上后展示全部内容 */
.textclip:hover{
overflow:visible;
}
.textellipsis{
width: 200px;
text-overflow: ellipsis;
border: 1px solid #333;
overflow: hidden;
/* 强制不换行 */
white-space: nowrap;
}
</style>
</head>
<body>
<h1>text-overflow: clip:</h1>
<p class="textclip">这里有一些无法容纳在框中的长文本</p>
<h1>text-overflow: ellipsis:</h1>
<p class="textellipsis">这里有一些无法容纳在框中的长文本</p>
</body>
</html>
运行效果：
7.1 CSS 字换行（Word Wrapping）
CSS word-wrap属性使长文字能够被折断并换到下一行。（如果一个单词太长而无法容纳在一个区域内，它会向外扩展。）- 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.textclip01 {
width: 11em;
border: 1px solid #333;
word-wrap: break-word;
}
.textclip02 {
width: 11em;
border: 1px solid #333;
word-wrap: normal;
}
</style>
</head>
<body>
<h1>word-wrap: break-word</h1>
<p class="textclip01">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
<h1>word-wrap: normal</h1>
<p class="textclip02">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
运行效果：
7.3 CSS 换行规则： word-break
- 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.textclip01 {
width: 11em;
border: 1px solid #333;
/* 允许在单词内换行 */
word-break: break-all;
}
.textclip02 {
width: 11em;
border: 1px solid #333;
/* 只能在半角空格或连字符处换行。 */
word-break: keep-all;
}
</style>
</head>
<body>
<h1>word-break: break-all，允许在单词内换行</h1>
<p class="textclip01">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word
will break and wrap to the next line.</p>
<h1>word-break: keep-all，只能在半角空格或连字符处换行</h1>
<p class="textclip02">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word
will break and wrap to the next line.</p>
</body>
</html>
运行效果：
7.4 CSS 书写模式：writing-mode
- 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.text01{
writing-mode: horizontal-tb;
}
p.text02{
writing-mode: vertical-lr;
}
p.text03{
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<p class="text01">一些文字</p>
<p class="text02">一些文字</p>
<p class="text03">一些文字</p>
</body>
</html>
运行效果：
7.5、CSS 文本效果属性
8、CSS Web 字体
CSS Web 字体
9、CSS 2D 转换：transform
CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。
通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
9.1 translate() 方法（平移）
translate()方法从其当前位置移动元素（根据为X轴和Y轴指定的参数）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: absolute;
}
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
}
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="ex1"></div>
<div class="ex2"></div>
</body>
</html>
运行效果：
9.2 rotate() 方法（旋转）
rotate()方法根据给定的角度顺时针或逆时针旋转元素。- 默认顺时针旋转，可设置为负数，负数则为逆时针
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: absolute;
}
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
}
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: rotate(20deg);
}
</style>
</head>
<body>
<div class="ex1"></div>
<div class="ex2"></div>
</body>
</html>
运行效果：
9.3 cale() 方法（缩放）
- scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。
下面的例子把 <div> 元素增大为其原始宽度的两倍和其原始高度的三倍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
position: absolute;
} */
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
}
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: scale(2,3);
margin-top: 250px;
}
</style>
</head>
<body>
<div>
<div class="ex1"></div>
<div class="ex2"></div>
</div>
</body>
</html>
运行效果：
9.4 scaleX() 方法：（增加或减少元素的宽度）
scaleX()方法增加或减少元素的宽度。
下面的例子把 <div> 元素增大为其原始宽度的两倍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
position: absolute;
} */
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
}
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: scaleX(2);
margin-top: 250px;
}
</style>
</head>
<body>
<div>
<div class="ex1"></div>
<div class="ex2"></div>
</div>
</body>
</html>
运行效果：
9.5 scaleY() 方法（增加或减少元素的高度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
position: absolute;
} */
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
}
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: scaleY(2);
margin-top: 250px;
}
</style>
</head>
<body>
<div>
<div class="ex1"></div>
<div class="ex2"></div>
</div>
</body>
</html>
运行效果：
9.6 skewX() 方法（使元素沿 X 轴倾斜给定角度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
position: absolute;
} */
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
}
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: skewX(20deg);
margin-top: 250px;
margin-left: 50px;
}
</style>
</head>
<body>
<div>
<div class="ex1"></div>
<div class="ex2"></div>
</div>
</body>
</html>
运行效果：
9.7 skewY() 方法（使元素沿 Y 轴倾斜给定角度）
div {
transform: skewY(20deg);
}
9.8 skew() 方法（使元素沿 X 和 Y 轴倾斜给定角度）
下面的例子使
元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：
div {
transform: skew(20deg, 10deg);
}
如果未指定第二个参数，则值为零。因此，下例使
元素沿 X 轴倾斜 20 度：
div {
transform: skew(20deg);
}
9.9 matrix() 方法(把所有 2D 变换方法组合为一个)
-
matrix()方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。 -
参数如下：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
![[C#]使用C#部署yolov8-cls的图像分类的tensorrt模型](https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8){kind=icon}
