14、CSS 图像样式
14.1 圆角图像:border-radius
.img01 {
width: 200px;
height: auto;
/* 四个角一致的圆角 */
border-radius: 10px;
}
14.2 圆形
.img02 {
width: 200px;
height: auto;
/* 圆形 */
border-radius: 50%;
}
14.3 缩略图图像
.img03{
border: 1px solid #ddd;
border-radius: 10px;
padding: 10px;
width: 200px;
}
.img03:hover{
border: 1px solid black;
}
14.4 响应式图像 根据窗口大小自动调整大小
.img04{
width: 50%;
height: auto;
}
14.5 图像居中
.img05{
display: block;
margin-left:auto;
margin-right: auto;
width: 200px;
}
完整代码:
<!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>
.img01 {
width: 200px;
height: auto;
/* 四个角一致的圆角 */
border-radius: 10px;
}
.img02 {
width: 200px;
height: auto;
/* 圆形 */
border-radius: 50%;
}
/* 缩略图图像 */
.img03{
border: 1px solid #ddd;
border-radius: 10px;
padding: 10px;
width: 200px;
}
.img03:hover{
border: 1px solid black;
}
/* 响应式图像 根据窗口大小自动调整大小 */
.img04{
width: 50%;
height: auto;
}
/* 图像居中 */
.img05{
display: block;
margin-left:auto;
margin-right: auto;
width: 200px;
}
</style>
</head>
<body>
<img class="img01" src="imgs/paper.jpg" alt="paper">
<img class="img02" src="imgs/paper.jpg" alt="paper">
<img class="img03" src="imgs/paper.jpg" alt="paper">
<img class="img04" src="imgs/paper.jpg" alt="paper">
<br>
<img class="img05" src="imgs/paper.jpg" alt="paper">
</body>
</html>
14.6 图像文本(在图像上定位文本)
- 文本在图片上左上角
<!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>
.container{
position: relative;
}
.topleft{
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="imgs/paper.jpg" alt="paper">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
运行效果:
14.7 图像滤镜
14.8 图像悬停叠加
- 淡入文本:
<!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>
.img {
width: 100%;
height: auto;
display: block;
}
.container {
position: relative;
width: 200px;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
/* transition: .5s ease; */
/* transition: width .5s height 5s ease; */
transition-duration: 1s;
transition-timing-function: ease;
background-color: #008CBA;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container:hover .overlay {
opacity: 1;
}
.text {
position: absolute;
top: 50%;
left: 50%;
/* transform: translateY(-50%);
transform: translateX(-50%); */
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<img class="img" src="imgs/paper.jpg" alt="paper">
<div class="overlay">
<div class="text">你好,中国</div>
</div>
</div>
</body>
</html>
- 淡入框:
<!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>
.container {
width: 200px;
position: relative;
}
.img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: .5s ease;
}
.text {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 5px;
}
.container:hover .overlay{
opacity:1;
}
.container:hover .img{
opacity:0.7;
}
</style>
</head>
<body>
<div class="container">
<img class="img" src="imgs/paper.jpg" alt="paper">
<div class="overlay">
<p class="text">哈喽</p>
</div>
</div>
</body>
</html>
- 从上方滑入:(思路:控制高度0-100% +过渡动画)
<!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>
.container {
width: 200px;
position: relative;
}
.img {
width: 100%;
height: auto;
display: block;
}
.overlay {
position: absolute;
width: 100%;
height: 0;
background-color: #008CBA;
top: 0;
left: 0;
bottom: 100%;
transition: .5s ease;
}
.text {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
visibility: hidden;
}
p {
padding: 0;
margin: 0;
}
.container:hover .overlay {
height: 100%;
bottom: 0;
}
.container:hover .text{
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<img class="img" src="imgs/paper.jpg" alt="paper">
<div class="overlay">
<p class="text">哈喽</p>
</div>
</div>
</body>
</html>
- 从下方滑入:(思路:同上)
<!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>
.container {
width: 200px;
position: relative;
}
.img {
width: 100%;
height: auto;
display: block;
}
.overlay {
position: absolute;
width: 100%;
height: 0;
background-color: #008CBA;
top: 100%;
left: 0;
bottom: 0;
transition: .5s ease;
}
.text {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
visibility: hidden;
}
p {
padding: 0;
margin: 0;
}
.container:hover .overlay {
height: 100%;
top: 0;
}
.container:hover .text{
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<img class="img" src="imgs/paper.jpg" alt="paper">
<div class="overlay">
<p class="text">哈喽</p>
</div>
</div>
</body>
</html>
- 左侧滑入:(思路:控制width)
<!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>
.container {
width: 200px;
position: relative;
}
.img {
width: 100%;
height: auto;
display: block;
}
.overlay {
position: absolute;
width: 0;
height: 100%;
background-color: #008CBA;
top: 0;
left: 0;
bottom: 0;
right: 100%;
transition: .5s ease;
}
.text {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
visibility: hidden;
white-space: nowrap;
}
p {
padding: 0;
margin: 0;
}
.container:hover .overlay {
width: 100%;
right: 0;
}
.container:hover .text{
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<img class="img" src="imgs/paper.jpg" alt="paper">
<div class="overlay">
<p class="text">哈喽</p>
</div>
</div>
</body>
</html>
14.9 图像翻转
<!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>
.img{
width: 200px;
height: auto;
}
.img:hover{
transform:scaleX(-1);
}
</style>
</head>
<body>
<div>
<img class="img" src="imgs/bill.png" alt="bill">
</div>
</body>
</html>
14.10 响应式图库
- 本例使用媒体查询来重新排列不同屏幕尺寸的图像。请调整浏览器窗口的大小以查看效果:
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 24%;
border: 1px solid #ccc;
float: left;
margin-left: 6px;
}
.img {
width: 100%;
height: auto;
}
.container:hover {
border: 1px solid #333;
}
.text {
padding: 15px 0;
text-align: center;
}
/* 响应式 */
@media only screen and (max-width: 700px) {
.container {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.container {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<img class="img" src="imgs/flower.png" alt="flower">
<div class="text">
<div>郁金香</div>
</div>
</div>
<div class="container">
<img class="img" src="imgs/flower.png" alt="flower">
<div class="text">
<div>郁金香</div>
</div>
</div>
<div class="container">
<img class="img" src="imgs/flower.png" alt="flower">
<div class="text">
<div>郁金香</div>
</div>
</div>
<div class="container">
<img class="img" src="imgs/flower.png" alt="flower">
<div class="text">
<div>郁金香</div>
</div>
</div>
</body>
</html>
15、CSS object-fit 属性
CSS object-fit
属性用于规定应如何调整<img>
或<video>
的大小来适应其容器。- 这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。
object-fit
属性可接受如下值:
fill
- 默认值。调整替换后的内容大小,以填充元素的内容框。如有必要,将拉伸或挤压物体以适应该对象。contain
- 缩放替换后的内容以保持其纵横比,同时将其放入元素的内容框。cover
- 调整替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。none
- 不对替换的内容调整大小。scale-down
- 调整内容大小就像没有指定内容或包含内容一样(将导致较小的具体对象尺寸)
16、CSS 按钮
16.1 可悬停的按钮+禁止使用
- hover改变颜色
<!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>
.button{
background-color: white;
border: 1px solid #4CAF50;
border-radius: 5px;
padding: 10px 15px;
/* 过渡动画时间 */
transition-duration: 0.5s;
/* 阴影 */
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover{
background-color: #4CAF50;
color: white;
}
.button02{
opacity: 0.5;
cursor: not-allowed;
background-color: white;
border: 1px solid gray;
border-radius: 5px;
padding: 10px 15px;
}
</style>
</head>
<body>
<button class="button">提交</button>
<button class="button02">禁用的按钮</button>
</body>
</html>
运行效果:
16.2 动画按钮
16.2.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>
.container {
background-color: #f4511e;
display: inline-block;
width: 200px;
padding: 20px;
/* 设置鼠标指针在元素上的样式为手型 */
cursor: pointer;
border-radius: 4px;
}
.text {
color: white;
font-size: 28px;
text-align: center;
transition: 0.5s;
display: inline-block;
position: relative;
}
.container:hover .text {
padding-right: 25px;
}
.container:hover .text::after {
opacity: 1;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.text:after {
content: '\00bb';
position: absolute;
transition: 0.5s;
opacity: 0;
right: -15px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
请悬停在我上方
</div>
</div>
</body>
</html>
运行效果:
16.2.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>
.button{
display: inline-block;
background-color: #4CAF50;
font-size: 25px;
outline: none;
border: none;
color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 9px #999;
/* transition: 0.5s; */
}
.button:hover{
background-color: #3e8e41;
}
/* 鼠标按下后 */
.button:active{
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<button class="button">请点击我</button>
</body>
</html>
17、CSS 分页实例
17.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>
/* 居中 */
.center {
text-align: center;
}
.container {
display: inline-block;
}
.container a {
color: black;
text-decoration: none;
float: left;
padding: 8px 16px;
/* 颜色改变过渡动画 0.3s */
transition: background-color .3s;
border: 1px solid #ededed;
margin-right: 4px;
}
.container a:hover {
background-color: #ddd;
/* border-radius: 4px; */
}
/* 选中效果 */
.container a.active {
background-color: #4CAF50;
color: white;
/* border-radius: 4px; */
}
.container a:first-child {
border-radius: 4px;
}
.container a:last-child {
border-radius: 4px;
}
</style>
</head>
<body>
<div class="center">
<div class="container">
<a href="#">«</a>
<a class="active" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>
运行效果:
17.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>
.container {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
.container a {
display: inline-block;
color: green;
padding: 8px;
text-decoration: none;
}
.container a+a:before {
content: '/\00a0';
padding-right: 8px;
}
</style>
</head>
<body>
<div class="container">
<a href="#">Home</a>
<a href="#">VIP</a>
<a href="#">Order</a>
<a href="#">Mine</a>
</div>
</body>
</html>
运行效果:
18、CSS 多列布局
CSS
多列布局允许我们轻松定义多列文本
18.1 CSS 多列属性
18.1.1 CSS 创建多列: column-count
<!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>
.columnexp {
column-count: 3;
}
</style>
</head>
<body>
<div class="columnexp">
话说天下大势,分久必合,合久必分:周末七国分争,并入于秦;及秦灭之后,楚、汉分争,又并入于汉;汉朝自高祖斩白蛇而起义,一统天下,后来光武中兴,传至献帝,遂分为三国。推其致乱之由,殆始于桓、灵二帝。桓帝禁锢善类,崇信宦官。及桓帝崩,灵帝即位,大将军窦武、太傅陈蕃,共相辅佐;时有宦官曹节等弄权,窦武、陈蕃谋诛之,机事不密,反为所害,中涓自此愈横。建宁二年四月望日,帝御温德殿。方升座,殿角狂风骤起,只见一条大青蛇,从梁上飞将下来,蟠于椅上。帝惊倒,左右急救入宫,百官俱奔避。须臾,蛇不见了。忽然大雷大雨,加以冰雹,落到半夜方止,坏却房屋无数。建宁四年二月,洛阳地震;又海水泛溢,沿海居民,尽被大浪卷入海中。光和元年,雌鸡化雄。六月朔,黑气十馀丈,飞入温德殿中。秋七月,有虹现于玉堂,五原山岸,尽皆崩裂。种种不祥,非止一端。帝下诏问群臣以灾异之由,议郎蔡邕上疏,以为蜺堕鸡化,乃妇寺干政之所致,言颇切直。帝览奏叹息,因起更衣。曹节在后窃视,悉宣告左右;遂以他事陷邕于罪,放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸,号为“十常侍”。帝尊信张让,呼为“阿父”。朝政日非,以致天下人心思乱,盗贼蜂起。
</div>
</body>
</html>
运行效果:
18.1.2 CSS 指定列之间的间隙:column-gap
.columnexp {
/* 列数 */
column-count: 3;
/* 列间距 */
column-gap: 40px;
}
18.1.3 CSS 列规则:column-rule-style
.columnexp {
/* 列数 */
column-count: 3;
/* 列间距 */
column-gap: 40px;
/* 列规则 */
column-rule-style:solid
}
运行效果:
18.1.4 CSS 列规则宽度:column-rule-width
.columnexp {
/* 列数 */
column-count: 3;
/* 列间距 */
column-gap: 40px;
/* 列规则 */
column-rule-style:solid;
/* 列规则宽度 */
column-rule-width: 20px;
}
运行效果:
18.1.5 CSS 列规则颜色:column-rule-color
.columnexp {
/* 列数 */
column-count: 3;
/* 列间距 */
column-gap: 40px;
/* 列规则 */
column-rule-style:solid;
/* 列规则宽度 */
column-rule-width: 20px;
/* 列规则颜色 */
column-rule-color: red;
}
运行效果:
18.1.6 列规则简写:column-rule
.columnexp {
/* 列数 */
column-count: 3;
/* 列间距 */
column-gap: 40px;
/* 列规则 */
/* column-rule-style:solid; */
/* 列规则宽度 */
/* column-rule-width: 20px; */
/* 列规则颜色 */
/* column-rule-color: red; */
/* 列规则简写 */
column-rule: 20px solid red;
}
18.1.7 指定元素应该横跨多少列:column-span
column-span: all;
<!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>
.columnexp {
/* 列数 */
column-count: 3;
/* 列间距 */
column-gap: 40px;
/* 列规则简写 */
column-rule: 20px solid red;
}
h2{
column-span: all;
}
</style>
</head>
<body>
<div class="columnexp">
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
话说天下大势,分久必合,合久必分:周末七国分争,并入于秦;及秦灭之后,楚、汉分争,又并入于汉;汉朝自高祖斩白蛇而起义,一统天下,后来光武中兴,传至献帝,遂分为三国。推其致乱之由,殆始于桓、灵二帝。桓帝禁锢善类,崇信宦官。及桓帝崩,灵帝即位,大将军窦武、太傅陈蕃,共相辅佐;时有宦官曹节等弄权,窦武、陈蕃谋诛之,机事不密,反为所害,中涓自此愈横。建宁二年四月望日,帝御温德殿。方升座,殿角狂风骤起,只见一条大青蛇,从梁上飞将下来,蟠于椅上。帝惊倒,左右急救入宫,百官俱奔避。须臾,蛇不见了。忽然大雷大雨,加以冰雹,落到半夜方止,坏却房屋无数。建宁四年二月,洛阳地震;又海水泛溢,沿海居民,尽被大浪卷入海中。光和元年,雌鸡化雄。六月朔,黑气十馀丈,飞入温德殿中。秋七月,有虹现于玉堂,五原山岸,尽皆崩裂。种种不祥,非止一端。帝下诏问群臣以灾异之由,议郎蔡邕上疏,以为蜺堕鸡化,乃妇寺干政之所致,言颇切直。帝览奏叹息,因起更衣。曹节在后窃视,悉宣告左右;遂以他事陷邕于罪,放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸,号为“十常侍”。帝尊信张让,呼为“阿父”。朝政日非,以致天下人心思乱,盗贼蜂起。
</div>
</body>
</html>
运行效果:
column-span: none;
<!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>
.columnexp {
/* 列数 */
column-count: 3;
/* 列间距 */
column-gap: 40px;
/* 列规则简写 */
column-rule: 20px solid red;
}
h2{
column-span:none;
}
</style>
</head>
<body>
<div class="columnexp">
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
话说天下大势,分久必合,合久必分:周末七国分争,并入于秦;及秦灭之后,楚、汉分争,又并入于汉;汉朝自高祖斩白蛇而起义,一统天下,后来光武中兴,传至献帝,遂分为三国。推其致乱之由,殆始于桓、灵二帝。桓帝禁锢善类,崇信宦官。及桓帝崩,灵帝即位,大将军窦武、太傅陈蕃,共相辅佐;时有宦官曹节等弄权,窦武、陈蕃谋诛之,机事不密,反为所害,中涓自此愈横。建宁二年四月望日,帝御温德殿。方升座,殿角狂风骤起,只见一条大青蛇,从梁上飞将下来,蟠于椅上。帝惊倒,左右急救入宫,百官俱奔避。须臾,蛇不见了。忽然大雷大雨,加以冰雹,落到半夜方止,坏却房屋无数。建宁四年二月,洛阳地震;又海水泛溢,沿海居民,尽被大浪卷入海中。光和元年,雌鸡化雄。六月朔,黑气十馀丈,飞入温德殿中。秋七月,有虹现于玉堂,五原山岸,尽皆崩裂。种种不祥,非止一端。帝下诏问群臣以灾异之由,议郎蔡邕上疏,以为蜺堕鸡化,乃妇寺干政之所致,言颇切直。帝览奏叹息,因起更衣。曹节在后窃视,悉宣告左右;遂以他事陷邕于罪,放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸,号为“十常侍”。帝尊信张让,呼为“阿父”。朝政日非,以致天下人心思乱,盗贼蜂起。
</div>
</body>
</html>
运行效果:
18.1.8 指定列宽度:column-width
column-width
属性为列指定建议的最佳宽度
。