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-shadow
box-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-wrap
word-break
writing-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);
}