CSS第三趴
一 吐槽
中级教程，开始有意思了，高级教程，瞅瞅
二 高级教程
1. 圆角 boder-radius
可以定义元素角的半径
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
<style> #rcorners1 { border-radius: 50px / 15px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 15px / 50px; /* 水平半径/垂直半径 */ background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners3 { border-radius: 50%; background: #73AD21; padding: 20px; width: 200px; height: 150px; } </style>
2. 边框图像 border-image
允许边框指定图像，而不是包围普通框
3. CSS多重背景 backgroud-image
背景可以设置多张图片，每张图片可以指定位置、设置尺寸等，背景图片会堆叠
4. 颜色
5. CSS渐变 backgound-image
可以显示两种或多种颜色之间的平滑过渡
CSS定义了两种渐变类型
1.线性渐变 （向下，向上，向左，向右，对角线）
2.径向渐变 （由其中心定义）
线性渐变：
#grad { background-image: linear-gradient(red, yellow); /*从上到下 默认*/ }
#grad {
background-image: linear-gradient(to right, red, yellow); /*从左到右*/
}
#grad {
background-image: linear-gradient(to bottom right, red, yellow); /*左上角到右下角，指定终点位置*/
}
使用角度
如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。
值 0deg 等于向上（to top）。
值 90deg 等于向右（to right）。
值 180deg 等于向下（to bottom）。
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
/*彩虹色*/
#menu { background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple); }
/*使用透明度*/
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
/*重复线性渐变*/
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
6.CSS径向渐变 backgound-image ，渐变搭配js可以做动画
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
#menu { background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple); } #menu1 { background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1)); } #menu2 { background-image: radial-gradient(red,orange,yellow,green,cyan,blue,purple); } #menu3 { background-image: radial-gradient(circle,red 5%,orange 10%,yellow 15%); } #grad4 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); } #grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); }
/*重复径向渐变*/
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
7. 阴影
text-shadow 为文本添加阴影
box-shadow 为元素添加阴影
8. 文本效果
8.1 文字溢出 text-overflow
如何向用户呈现未显示的溢出内容
9. web字体
10 CSS 2D转换 transform
可以移动，旋转，缩放和倾斜元素
div { height: 100px; width: 100px; margin: 20px; } #translate { background-color: skyblue; transform: translate(50px,10px); } #rotate { background-color: #4CAF50; transform: rotate(-20deg); /*逆时针旋转20度*/ } #scale { background-color: red; /*增大或缩小*/ /*transform: scale(2, 3); !* 宽度变两倍 高度变三倍*!*/ /*transform: scale(0.5,0.5); !*高度，宽度变为一半*!*/ /*transform: scaleX(0.5); !*宽度变为一半*!*/ transform: scaleY(0.5) /*高度变为一半*/ } #skew { /*使元素沿x轴或y轴，倾斜给定角度*/ background: orange; /*transform: skewX(10deg); !*沿X轴，倾斜10度 水平方向 倾斜10度*!*/ /*transform: skewY(20deg); !*沿Y轴，倾斜20度* 竖直方向 倾斜20度!*/ transform: skew(20deg,10deg); /* x轴倾斜20度，Y轴倾斜10度 */ }
11 CSS 3D转换 transform
通过 CSS transform 属性，您可以使用以下 3D 转换方法：
rotateX()
rotateY()
rotateZ()
旋转左手法则，见该图
https://blog.csdn.net/shulianghan/article/details/132264880
12 CSS过渡
当指定过渡的属性值发生变化，则开始按设置时间往设置属性值过渡
在给定时间内平滑的改变属性值
transition: width 2s, height 4s; /* 当指定的css属性值width发生变化时，将开始过渡效果 */
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
#rotateY { background-color: cadetblue; width: 100px; height: 100px; transform: rotateY(0deg); transition: transform 10s; /*过渡*/ transition-timing-function: ease-in; /*缓慢开始*/ transition-delay: 1s; /*延迟1s执行*/ }
13. CSS动画
使元素逐渐从一种样式编程另一种样式
太好玩了
1. 编写动画 @keyframes
2. 元素css设置动画属性，挂载动画 animation-name
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> @keyframes example { from { background-color: gray; } to { background-color: green; width: 100%; height: 300px; } } @keyframes example1 { /*设置帧*/ 0% { background-color: gray; } 25% { background-color: red; width: 20%; height: 25px; } 50% { background-color: orange; width: 50%; height: 50px; } 75% { background-color: yellow; width: 75%; height: 25px; } 100% { background-color: green; width: 100%; height: 100px; } } #anime { background-color: gray; width: 100px; height: 100px; animation-name: example; /*绑定动画*/ animation-duration: 10s; /*持续10s*/ animation-delay: 2s; /*延迟2s*/ animation-iteration-count: infinite; /*永远持续，无限播放*/ animation-direction: alternate; /*先向前再向后*/ animation-timing-function: ease-in-out; /*速度曲线，开始和结束较慢*/ } #anime1 { background-color: gray; width: 100px; height: 100px; animation-name: example1; /*绑定动画*/ animation-duration: 10s; /*持续10s*/ animation-delay: 1s; /*延迟2s*/ animation-iteration-count: infinite; /*永远持续，无限播放*/ animation-direction: alternate-reverse; /*先向后再向前*/ animation-timing-function: ease-out; /*速度曲线，结束较慢*/ animation-fill-mode: backwards; /*动画开始前，使挂载元素获得第一个关键帧设置的样式*/ } </style> </head> <body> <div id="anime"> </div> <div id="anime1"> </div> </body> </html>
14 工具提示
改变子元素的visbility属性，显示子元素，插入动态效果，贼好玩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬停提示</title> <style> .tip-div { width: 100px; height: 100px; } .tip-span { visibility: hidden; width: 100px; height: 100px; transition: opacity 3s; position: absolute; z-index: 1; opacity: 0; } .tip-div:hover .tip-span{ visibility: visible; opacity: 1; } </style> </head> <body> <div class="tip-div"> 放上去看看 <span class="tip-span"> 帅不帅 </span> </div> </body> </html>
15 CSS图像样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片处理，搭配动画起飞</title> <style> #natural { /*border-radius: 50%; !*圆角图像*!*/ border: 1px solid gray; padding: 5px; } #natural:hover { box-shadow: 0 0 2px 1px firebrick; } #natural { max-width: 100%; height: auto; display: block; /*图像居中*/ margin-left: auto; margin-right: auto; } .pic-1 { box-shadow: 0 20px 8px 10px lightyellow, 0 6px 10px 12px yellow; opacity: 0.5; filter: grayscale(100%); } .container { position: relative; width: 200px; } .topleft { position: absolute; top: 0px; left: 0px; font-size: 18px; } .topMedium { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 18px; } .div1 { position: relative; width: 200px; height: 200px; margin: 0; span: 0; } .tip1 { transform: translate(50px,-150px); opacity: 0; background-color: cadetblue; width: 100px; } .div1:hover .tip1{ opacity: 1; } .div2 { position: relative; width: 200px; height: 200px; margin: 0; span: 0; } .tip2 { position: absolute; top: 0; left: 0; text-align: center; opacity: 0; background-color: cadetblue; width: 100%; height: 20px; transition: .5s ease; } .div2:hover .tip2{ height: 100%; opacity: 1; } .div3 { position: relative; width: 200px; height: 200px; margin: 0; span: 0; } .tip3 { position: absolute; top: 0; left: 0; text-align: center; opacity: 0; background-color: cadetblue; width: 100%; height: 20px; transition: .5s ease; } .div3:hover img{ transfrom: scaleX(-1); } #img_na { transition: transform,10s; } #img_na:hover { transform: scaleX(-1); } .div4 { position: relative; width: 200px; height: 200px; margin: 0; span: 0; } #img4 { object-fit: cover; /*调整大小填充元素整个内容*/ } </style> </head> <body> <img id="natural" class="pic-1" src="../pic/nature_1.jpg" alt="自然图片" width="200px" height="200px"> <div class="container"> <img id="natural1" class="pic-2" src="../pic/nature_1.jpg" alt="自然图片" width="200px" height="200px"> <div class="topleft">Top left</div> <div class="topMedium">Top medium</div> </div> <div class="div1"> <img src="../pic/nature_1.jpg" width="200px" height="200px"> <div class="tip1"> <p>Hello World</p> </div> </div> <div class="div2"> <img src="../pic/nature_1.jpg" width="200px" height="200px"> <div class="tip2"> <p>Hello World</p> </div> </div> <div class="div3"> <img src="../pic/nature_1.jpg" width="200px" height="200px"> <div class="tip3"> <p>Hello World</p> </div> </div> <img id="img_na" src="../pic/nature_1.jpg" width="200px" height="200px"> <div class="div4"> <img id="img4" src="../pic/nature_1.jpg" width="100px" height="100px"> </div> </body> </html>
16 按钮
过渡 transition使用，看起来按钮高大上
17 分页
18 多列
column-count 规定元素应划分的列数。 column-fill 规定如何填充列。 column-gap 指定列之间的间隙。 column-rule 用于设置所有 column-rule-* 属性的简写属性。 column-rule-color 规定列之间规则的颜色。 column-rule-style 规定列之间的规则样式。 column-rule-width 规定列之间的规则宽度。 column-span 规定一个元素应该跨越多少列。 column-width 为列指定建议的最佳宽度。 columns 用于设置 column-width 和 column-count 的简写属性。
19. 用户界面
resize 元素是否应被用户调整大小
outline-offset 轮廓偏移
20 CSS变量
:root { --blue: #1e90ff; --white: #ffffff; } body { background-color: var(--blue); }
覆盖变量：
:root {
--blue: #1e90ff;
--white: #ffffff;
}
button {
--blue: #0000ff; /* 覆盖变量 */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
js修改css变量
<script>
// 获取根元素
var r = document.querySelector(':root');
// 创建获取变量值的函数
function myFunction_get() {
// Get the styles (properties and values) for the root
var rs = getComputedStyle(r);
// Alert the value of the --blue variable
alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}
// 创建设置变量值的函数
function myFunction_set() {
// Set the value of variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
媒体查询使用css变量
/* 变量声明 */
.container {
--fontsize: 25px;
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
}
21 CSS Box Sizing
允许元素总宽度或总高度，包括内边距(填充)和边框
height 和 width 会包括padding和border
22 Flexbox
弹性框布局，可以轻松地设计灵活的响应式布局结构，而无需使用浮动或定位
弹性元素的直接子元素，会自动成为弹性元素
23 媒体查询
24 网格布局模块
提供了带有行和列的基于网格的布局系统，使网页设计更容易，无需使用浮动和定位
网格布局父元素display为grid或inline-grid, 网格的直接子元素自动成为网格项目
