本文主要是介绍快速回顾-CSS3，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
回顾 1
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS66</title><style>/* 选择器 *//* h4 {color: red;}.classSelector {color: blue;}#idSelector {color: green;} *//* 类选择器分配样式 *//* .purple {color: purple;}.pink {color: pink;}.red {color: red;} *//* 布局 */.inline {display: inline;}.block {display: block;background-color: pink;width: 400px;height: 100px;}.inline-block {display: inline-block;width: 260px;}.none {display: none;}</style>
</head><body><!-- 选择器 --><!-- <h4>元素选择器</h4><p class="classSelector">类选择器</p><p id="idSelector">id选择器</p> --><!-- 类选择器分配样式 --><!-- <p class="purple">我希望这段文字是紫色的</p><p class="pink">我希望这段文字是粉红的</p><p class="red">我希望这段文字是红色的</p> --><!-- 布局 --><div>我独占一行</div><div>我独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><hr><span>我不独占一行</span><span>我不独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><hr><div class="inline-block">我不独占一行，且可以调节宽高</div><div class="inline-block">我不独占一行，且可以调节宽高</div><hr><div class="none">你看不到我</div><hr><div class="flex"><div class="item">项目</div><div class="item">项目</div><div class="item">项目</div></div></body></html>
回顾 2
效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;/* 盒子尺寸计算：以边框为盒子尺寸计算依据（针对于 width、height 有效） */box-sizing: border-box;}a,li {/* 文本修饰：无 */text-decoration: none;}.box-1 {/* 1. 盒子可视化 */border: 6px solid gold;/* 2. 修改盒子内外样式 *//* 2.1 修改外部 */margin-top: 20px;/* 2.2 修改本体 *//* 盒子尺寸 */width: 300px;height: 90px;/* 盒子边框 */border-radius: 34px;box-shadow: -6px 6px 2px #666;/* 盒子背景 */background-image: url(https://img.zcool.cn/community/01c94c563736d66ac7259e0fd89fcb.jpg@2o.jpg);background-size: 180px 60px;background-repeat: no-repeat;background-origin: content-box;}.box-2 {/* 1. 盒子可视化 */border: 6px solid gold;/* 2. 修改盒子样式 *//* 2.1 修改外部 */margin-top: 20px;/* 2.2 修改本体 */width: 400px;height: 100px;/* 颜色渐变 *//* 第一种渐变方式：linear gradient 线性的渐变 */background: linear-gradient(120deg, red, blue, 50%, pink, rgba(0, 0, 0, 0.5), green);}.box-3 {/* 盒子可视化 */border: 6px solid gold;margin-top: 20px;width: 300px;height: 100px;/* 颜色渐变 *//* 第二种渐变方式：linear gradient 径向的渐变 */background: radial-gradient(ellipse, red 5%, green 15%, blue 60%);/* 重复的渐变 *//* background: repeating-radial-gradient(red, yellow 10%, green 15%) */}.box-4 {border: 6px solid gold;margin-top: 20px;width: 400px;height: 68px;/* 内容溢出盒子：隐藏 */overflow: hidden;/* 文本效果 */p:nth-child(1) {text-shadow: -5px 3px 4px #666;text-align: center;}}.box-5 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 120px;background-color: red;/* 使变形：平移(x, y) */transform: translate(68px, 0);/* 使变形：旋转(90度) */transform: rotate(90deg);/* 使变形：伸缩(1倍, 1倍) */transform: scale(1, 1);/* 使变形：倾斜(30度，-20度)*/transform: skew(30deg, -20deg);}.box-6 {border: 6px solid gold;margin-top: 40px;width: 200px;height: 120px;/* 使变化：平移 */transform: translate3d(30px, 30px, 30px);/* 使变化：旋转 */transform: rotate3d(1, 0.5, 0, -780deg);/* 使变化：伸缩 */transform: scale3d(2, 1, 1);}.box-7 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 120px;/* 过渡效果：监控某某属性 过渡时长 */transition: transform 2s, background-color 3s;}.box-7:hover {transform: scale(0.5, 0.5);background-color: pink;}/* 定义"关键帧" */@keyframes changeBoxSize {0% {width: 120px;height: 60px;}100% {width: 200px;height: 100px;}}.box-8 {border: 6px solid gold;margin-top: 20px;width: 120px;height: 60px;/* 使用"关键帧"生成动画 *//* 动画：某某关键帧 播放周期秒数 线性播放速度 延迟2s 播放次数为无限 下一周期逆向地播放 */animation: changeBoxSize 5s linear 2s infinite alternate;}.box-9 {border: 6px solid gold;margin-top: 20px;width: 500px;height: 180px;/* 文本多列 */column-count: 2;column-gap: 100px;column-rule: 3px outset black;}.box-10 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 120px;/* 调整尺寸：两边都可调整（需要配合 overflow 使用） */resize: both;/* 元素溢出时：自动 */overflow: visible;overflow: hidden;overflow: clip;overflow: scroll;overflow: auto;/* 外形修饰 */outline: 2px solid red;outline-offset: 6px;}.box-11 {border: 6px solid gold;margin-top: 40px;width: 300px;height: 180px;/* 缩略图 */img {width: 200px;height: 120px;border: 5px solid red;border-radius: 10px;padding: 18px;/* 图片滤镜：图片颜色设置为100%灰度 */filter: grayscale(100%);}}.box-12 {border: 6px solid gold;margin-top: 20px;width: 100%;height: 330px;/* =================== flex布局详解 ================ *//* 显示：启用flex布局 */display: flex;/* flex的方向：横着-反方向 */flex-direction: row-reverse;/* item 换行，溢出的 item 会被换行 */flex-wrap: wrap;/* flex-flow 只是一个简写，因此它自身的属性值就是 flex-direction 与 flex-wrap 的属性值 *//* flex-flow: row-reverse; *//* 沿着主轴（主轴默认是横轴）进行每一个 item 位置的调整 */justify-content: space-around;/* 沿着侧轴（侧轴默认是纵轴）进行每一个 item 位置的调整 */align-content: space-around;/* align-items 其实就是在父容器上统一设置所有直接子元素的 align-self 值，它本身并不具有任何的附加效果，所以我们直接看 align-self 即可 *//* align-items: flex-end; *//* gap 的作用是元素与元素之间的间距，而不是元素与容器之间的间距 *//* 间距：行 列 */gap: 60px 80px;.item {border: 1px solid red;width: 200px;height: 100px;}.item:nth-child(1) {background-color: pink;align-self: flex-end;}}.box-13 {border: 6px solid gold;margin-top: 20px;width: 100%;height: 330px;/* =================== flex布局详解 ================ */display: flex;flex-direction: row;.item {border: 1px solid red;width: 100px;height: 100px;}.item:nth-child(1) {background-color: pink;/* align-items 属性，这个属性的主要作用是控制所有的 flex 元素在“交叉轴”方向的对齐方式 *//* align-self 属性是控制单个的 flex 元素在“交叉轴”方向的对其方式 */align-self: flex-end;}.item:nth-child(2) {background-color: green;/* 所有的 flex 元素宽度总和小于 flex 容器的宽度之后，按照特定的比率去分配空间给具有 flex-grow 值的 flex 元素 *//* flex 容器中被分配的比例值，属性值为纯数字，可以是带小数点的数字 */flex-grow: 2.5;}.item:nth-child(3) {background-color: blue;/* 续接上文 */flex-grow: 2;}.item:nth-child(4) {background-color: grey;/* 当 flex 元素之和大于 flex 容器的宽度时，具有 flex-shrink 属性的 flex 元素会根据特定的比率缩小其自身的宽度 */flex-shrink: 1;/* 在 flex 元素中使用频率较高的应该是 flex 这个属性了，该属性是一个简写属性，包含了 flex-grow、flex-shrink 以及 flex-basis 这三个属性。 *//* flex 占比空间：flex-grow: 6 && flex-shrink: 2 && flex-basis: 50% 简写成以下格式 */flex: 1 1 0%;/* order 属性规定了 flex 元素在 flex 容器中布局时的顺序。在未设置任何 order 属性值或者设置了相同的 order 属性值时，会以元素在 dom 节点中出现的顺序进行布局；而如果我们修改了 order 的属性值，就将会以递增的方式排序，数字越大，flex 元素就排得越后面。order 属性仅仅只是将 flex 元素在页面展示时的视觉效果做了位置的调整，并不会改变其自身在 dom 节点的位置以及顺序属性值可以为负值，只要是整数就可以了*/order: 99;}}/* ==================== 多媒体查询 =================== *//* 多媒体查询用于检测：viewport(视窗) 的宽度与高度设备的宽度与高度朝向 (智能手机横屏，竖屏) 。分辨率媒体类型：---------------------------------------| 值 | 描述---------------------------------------| all | 用于所有多媒体类型设备| print | 用于打印机| screen | 用于电脑屏幕，平板，智能手机等| speech | 用于屏幕阅读器---------------------------------------书写格式@media not/only 媒体类型 and (表达式) {}*/@media screen and (min-width: 600px) {.box-14 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 100px;background-color: red;}}</style>
</head><body><a href="https://www.baidu.com">点击前往百度</a><ol><li>第一个li标签</li><li>第二个li标签</li><li>第三个li标签</li></ol><div class="box-1">This is box-1</div><div class="box-2">This is box-2</div><div class="box-3">This is box-3</div><div class="box-4">This is box-4<p>Hello World</p><p>This is a message for you.</p><p>How are you?</p></div><div class="box-5">This is box-5</div><div class="box-6">This is box-6</div><div class="box-7">This is box-7</div><div class="box-8">This is box-8</div><div class="box-9">This is box-9生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。若能掬起一捧月光，我选择最柔和的；若能采来香山红叶，我选择最艳丽的；若能摘下满天星辰，我选择最明亮的。也许你会说，我的选择不是最好，但我的选择，我相信。</div><div class="box-10">This is box-10 万里悲秋常作客，百年多病独登台！</div><div class="box-11"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0"alt=""></div><div class="box-12"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div><div class="box-13"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>
内容推荐
- CSS 视频教程：https://www.bilibili.com/video/BV17X4y1d7mT/
- CSS 文档教程：
- CSS2：https://www.w3cschool.cn/css/
- CSS3: https://www.w3cschool.cn/css3/
CSS 编写工具：https://css.bqrdh.com/
这篇关于快速回顾-CSS3的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
