本文讲解CSS3相关实用知识点
CSS3相关实用知识点目录
边框设置
颜色设置
背景设置
渐变使用
超出文本设置
阴影设置
CSS3变换设置
过渡设置
动画设置
多列布局
BoxSizing设置
弹性布局
滤镜函数
媒体查询
resize元素
outline偏移
其他的@规则使用
边框
边框圆角 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 { ???????width: 400px; ???????overflow: hidden; ???????white-space: nowrap; ???????background: #cdcdcd; ???????text-overflow: ellipsis; ???}超出文本直接截取 ???p { ???????width: 400px; ???????overflow: hidden; ???????white-space: nowrap; ???????background: #cdcdcd; ???????text-overflow: clip; ???}文本自动换行 ???p { ???????width: 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;CSS3变换设置
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{ ???????width: 100px; ???????height: 100px; ???????background-color: black; ???????transition-property: background-color; ???????transition-duration: 1s; ???} ???div:hover{ ???????background-color: aqua; ???}多个属性动画使用 ???div{ ???????width: 100px; ???????height: 100px; ???????background-color: black; ???????transition-property: background-color, width; ???????transition-duration: 1s, 2s; ???} ???div:hover{ ???????background-color: aqua; ???????width: 200px; ???}过渡简写 ???顺序 transition-property, transition-duration, transition-timing-function, and transition-delay ???transition: background-color 1s ease-in 0s;动画设置
animation具有比transition更强的控制动画的能力基本使用 ???div{ ???????width: 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 { ???????width: 500px; ???????column-count: 3; ???????background-color: gainsboro; ???} ???.box1 { ???????background-color: aqua; ???} ???.box2 { ???????background-color: bisque; ???}设置列宽 ????column-width: 200px; ???column-width和column-count不能一起使用，因为他们两个作用是一样的，都是来指定显示多少列设置列与列之间的间隔 ???默认间隔是1em ???column-gap: 0px;设置列与列之间的间隔线 ???column-rule: 2px solid red;BoxSizing设置
默认设置width,height是以盒子的内容计算的，可以设置box-siziing改变这一行为box-sizing: border-box;- 弹性布局 请访问 css3弹性布局
滤镜函数
.box { ???width: 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-width: 767px) { } 手机@media screen and (min-width: 768px) and (max-width: 1023px) { } ipad@media screen and (min-width: 1024px) { } 小电脑@media screen and (min-width: 1280px) { } 中电脑...resize元素
.box { ???width: 300px; ???min-height: 100px; ???overflow: auto; ???border: 1px solid black; ???resize: horizontal; 水平可拖动 ???resize: both; 随意拖动 ???resize: none; 清楚拖动}outline偏移
.box { ???width: 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; 指定设备