本文讲解CSS3相关实用知识点
CSS3相关实用知识点目录
边框设置
颜色设置
背景设置
渐变使用
超出文本设置
阴影设置
CSS3变换设置
过渡设置
动画设置
多列布局
BoxSizing设置
弹性布局
滤镜函数
媒体查询
resize元素
outline偏移
其他的@规则使用
calc
-
边框圆角 border-radius: 10px; 边框图片设置 border: 20px solid transparent; border-image: url(./2.jpg) 7 31 round; -
rgb（红，绿，蓝） background: rgb(0, 0, 112) background: rgba(0%, 0%, 11%, 0.8) hsl（色值，饱和度，亮度） background:hsl(332, 50%, 50%); background:hsla(332, 50%, 50%, 0.5); -
背景大小 background-size: 10%; background-size: 100px; background-size: cover; 背景覆盖，只要覆盖住元素就可以 background-size: contain; 背景填充，压缩或者拉伸图片以填充满元素 背景裁剪 background-clip: content-box; 按内容裁剪 background-clip: padding-box; 按padding裁剪 background-clip: border-box; 按border裁剪 背景位置 background-origin: content-box; 从内容开始 background-origin: padding-box; 从padding开始 background-origin: border-box; 从border开始 多重背景 background: url("./1.jpg") no-repeat center, url("./2.jpg") no-repeat center, lightblue; 写在前面的背景在最上面，背景颜色只能写在最后面 -
线性渐变 从上到下 background: linear-gradient(red, yellow); 从左到右 background: linear-gradient(to right, red, yellow); 从左下到右上 background: linear-gradient(to top right, red, yellow); 使用角度，0deg表示bottom to top，方向是顺时针旋转 background: linear-gradient(30deg, red, yellow); 多颜色渐变 background: linear-gradient(red, yellow, lime); 指定颜色停止点 background: linear-gradient(red , yellow 30%, lime 90%); 也就是说，在30%的位置必须是yellow，在90%的位置必须是lime，除了可以指定百分比外还可以指定px background: linear-gradient(red , yellow 30%, lime 120%); 还可以超出范围 渐变重复 background: repeating-linear-gradient(darkmagenta,green 10%, darkmagenta 20%) 背景图渐变色 background: linear-gradient(to right, rgba(228, 108, 10, 0.1), rgb(10, 182, 1)), url("./1.jpg"); 径向渐变 基本语法 radial-gradient(shape size at position, color-stop1, color-stop2, ...); 其中 shape 设置渐变结束的形状 circle ellipse 其中 size 设置渐变大小 farthest-corner closest-corner farthest-side closest-side 其中 position 设置渐变的位置 top left ... 从里到外 background: radial-gradient(red, yellow, lime); 从左下到右上 background: radial-gradient(circle farthest-corner at left bottom, red, yellow, lime); 渐变重复 background: repeating-radial-gradient(yellow, white 10%, lime 20%); -
超出文本显示省略号 p { 400px; overflow: hidden; white-space: nowrap; background: #cdcdcd; text-overflow: ellipsis; } 超出文本直接截取 p { 400px; overflow: hidden; white-space: nowrap; background: #cdcdcd; text-overflow: clip; } 文本自动换行 p { 400px; background: #cdcdcd; word-wrap: break-word; ---也可以设置如下--- word-break: break-all; keep-all } -
盒子阴影 基本语法 box-shadow: x偏移量 y偏移量 阴影模糊量 颜色; box-shadow: 5px 5px 10px #ccc; box-shadow: 5px 5px 10px red, 10px 10px 20px yellow; 文本阴影 text-shadow: 5px 5px 10px #666; text-shadow: 5px 5px 10px red, 10px 10px 20px yellow; -
2D变换 元素位移 transform: translate(200px, 100px); 元素旋转 transform: rotate(30deg); 默认顺时针方向 元素缩放 transform: scale(1.5, 0.8);transform: scale(1.5) 元素扭曲 transform: skew(-40deg, 15deg); 简写 transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg); 3D变换 body{ perspective: 500px; } 元素位移 transform: translate3d(20px, 30px, 50px); 元素旋转 transform: rotate3d(0, 1, 0, 60deg); 沿着y轴旋转 元素缩放 transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); -
单个属性动画使用 div{ 100px; height: 100px; background-color: black; transition-property: background-color; transition-duration: 1s; } div:hover{ background-color: aqua; } 多个属性动画使用 div{ 100px; height: 100px; background-color: black; transition-property: background-color, width; transition-duration: 1s, 2s; } div:hover{ background-color: aqua; 200px; } 过渡简写 顺序 transition-property, transition-duration, transition-timing-function, and transition-delay transition: background-color 1s ease-in 0s; -
animation具有比transition更强的控制动画的能力 基本使用 div{ 100px; height: 100px; background-color: black; position: relative; animation-name: movebox; animation-duration: 2s; } @keyframes movebox { from { left: 0; } to { left: 200px; } } keyframes的定义 @keyframes movebox { 12.5% {left: -50px;} 25% {left: 50px;} 37.5% {left: -25px;} 50% {left: 25px;} 62.5% {left: -10px;} 75% {left: 10px;} 87.5% {left: -5px;} 90% {left: 5px;} 92.5% {left: -3px;} 95% {left: 3px;} 97.5% {left: -1px;} 100% {left: 1px;} } 动画简写 顺序从上到下 animation-name, 动画名称 animation-duration, 动画持续时间 animation-timing-function, 动画执行函数 animation-delay, 动画延迟时间 animation-iteration-count 动画重复次数 animation-direction 动画在重复播放时是否反序播放，主要和animation-iteration-count配合使用 animation-fill-mode 指定动画结束后，元素在哪个地方，backwards, forwards animation-play-state 指定动画暂停和结束，paused, running 如 animation: movebox 2s linear 0s 1 alternate backwards running; -
如果你想布局多列，使用多列布局简直就是神器 基本使用 <div class="box"> <div class="box1">1</div> <div class="box2">2</div> </div> .box { 500px; column-count: 3; background-color: gainsboro; } .box1 { background-color: aqua; } .box2 { background-color: bisque; } 设置列宽 column- 200px; column-width和column-count不能一起使用，因为他们两个作用是一样的，都是来指定显示多少列 设置列与列之间的间隔 默认间隔是1em column-gap: 0px; 设置列与列之间的间隔线 column-rule: 2px solid red; -
默认设置width,height是以盒子的内容计算的，可以设置box-siziing改变这一行为 box-sizing: border-box; -
.box { 500px; height: 500px; background-color: red; filter: blur(5px); 设置模糊程度 filter: contrast(50%); 设置亮度 filter: drop-shadow(4px 4px 10px orange); 设置阴影，和box-shadow类似 filter: grayscale(50%); 设置灰度 filter: hue-rotate(480deg); 设置颜色旋转角度 filter: invert(100%); 设置颜色反转 filter: opacity(20%); 设置背景透明 filter: sepia(62%); 设置复古 filter: saturate(20%); 设置饱和度 } 和写顺序 filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() -
媒体查询是做响应式布局必备知识 @media screen and (max- 767px) { } 手机 @media screen and (min- 768px) and (max- 1023px) { } ipad @media screen and (min- 1024px) { } 小电脑 @media screen and (min- 1280px) { } 中电脑 ... -
.box { 300px; min-height: 100px; overflow: auto; border: 1px solid black; resize: horizontal; 水平可拖动 resize: both; 随意拖动 resize: none; 清楚拖动 } -
.box { 300px; height: 300px; border: 1px solid #ccc; outline: 2px solid red; outline-offset: 10px; 外移 outline-offset: -10px; 内移 } -
设置css编码 @charset "UTF-8"; 设置在外部样式表文件的头部 设置自定义字体 @font-face { font-family: "OpenSansBold"; src: url("../fonts/OpenSans-Bold.eot"); src: url("../fonts/OpenSans-Bold.ttf") format("truetype"); } 然后可以这样使用 div{ font-family: "OpenSansBold"; } 导入css文件 @import url("css/layout.css"); @import url("css/print-style.css") print; 指定设备 -
calc用来计算元素的大小和位置 .center{ position: absolute; background: red; height: 200px; 200px; top: calc(50% - 200px / 2); left: calc(50% - 200px / 2); } <div class="center"></div>