CSS
PandaMirs
一个平凡的phper
展开
-
盒子阴影box-shadow
属性:box-shadow作用:用于设定一个盒子的阴影效果形式:box-shadow:水平偏移值 垂直偏移值 [模糊值] [外延值] [颜色] [inset];说明:1,至少设置两个长度值,分别表示阴影的水平偏移量和垂直偏移量,可以为负;2,模糊值是设定阴影的模糊效果的宽度,可以不设置,则默认为0;3,外延值是设定阴影再“扩大”的宽度,可以不设置,则默认为0;...原创 2019-04-16 15:04:31 · 2207 阅读 · 0 评论 -
2d变换(1)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .box{ width: 200px; ...原创 2019-04-28 14:47:38 · 169 阅读 · 0 评论 -
盒子新模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .box{ box-sizing: borde...原创 2019-05-03 14:07:09 · 345 阅读 · 0 评论 -
精灵图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ position: absolute; display: inline-block; ...原创 2019-05-03 14:38:26 · 107 阅读 · 0 评论 -
2d变换2+总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .box,.box1{ width: 200p...原创 2019-04-28 15:34:42 · 217 阅读 · 0 评论 -
自定义字体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> @font-face{ font-famil...原创 2019-05-03 15:07:48 · 895 阅读 · 0 评论 -
自定义图标
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入图标字体的文件--> <link rel="stylesheet" href="iconfont/iconfo...原创 2019-05-03 16:53:38 · 1038 阅读 · 0 评论 -
圣杯布局+弹性布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> *{ margin: 0; paddin...原创 2019-05-03 16:54:12 · 539 阅读 · 0 评论 -
css属性选择器
选择器 关系选择器 子代选择器 > 后代选择器 空格 相邻选择器 + 兄弟选择器 ~ 属性选择器 [attr] 选中所有标签上的有color这个属性的标签 [attr]="val" 选中attr属性等于var完全相等 [attr]~="val" 能选中 含有这个单词的 [attr]^="val" 以val开头 [attr]...原创 2019-05-03 23:09:41 · 130 阅读 · 0 评论 -
3d变换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .wutai{ height: 400px;...原创 2019-04-29 14:48:37 · 214 阅读 · 0 评论 -
3d变换 旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .wutai{ width: 500px; ...原创 2019-04-29 15:45:28 · 265 阅读 · 0 评论 -
3d变换美女图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .wutai{ width: 600px; ...原创 2019-04-29 16:41:46 · 383 阅读 · 0 评论 -
关于图片居中的问题
vartical-align:baseline;文字平图片下方vartical-align:middle;文字平图片中间vartical-align:top;文字平图片上方原创 2019-05-05 12:21:21 · 437 阅读 · 0 评论 -
23 d弹性总结
2D变换和3D变换的总结对比: 实际上,2D变换和3D变换并没有本质的区别,无非是3D变换多出了一些变换函数(方式)。而原来的2D变换函数也都照样可以用(毕竟2D变换无非只是在x-y平面上进行,不涉及z轴)。 变换方式 2D变换可用函数 3D变换可用函数 位移变换: 单位:px ...原创 2019-04-30 11:28:33 · 344 阅读 · 0 评论 -
过渡属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .box{ width: 506px; ...原创 2019-04-30 14:55:37 · 512 阅读 · 0 评论 -
过度2加总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> div{ width: 300px; h...原创 2019-04-30 19:57:00 · 192 阅读 · 0 评论 -
text-shadow文字阴影
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .tu,.ao{ background: #c...原创 2019-05-02 21:14:31 · 265 阅读 · 0 评论 -
光标cursor
光标形状设置cursor含义:设置鼠标在某个盒子上的时候的光标形状。形式: cursor:光标形状名;常用的光标形状名有:default(默认), pointer(手形), text(文本编辑形), help(帮助), wait(等待)。 ...原创 2019-05-02 20:51:00 · 271 阅读 · 0 评论 -
border-images
主要属性边框背景的主要属性有:border-image-source:设置作为边框背景的图片源;border-image-slice:设置要将边框背景图片进行“切割”的分割方式。形式为:border-image-slice: 数值[fill]; //特别注意:这里的数值不带单位!其中“数值”可以是1-4个值,分别代表上右下左4个方向的“切割厚度”。fill...原创 2019-04-16 18:28:52 · 326 阅读 · 0 评论 -
CSS可见属性 visibility
visibility:hidden 隐藏visibility:visible可见原创 2019-04-13 17:16:36 · 795 阅读 · 0 评论 -
CSS优先级
伪元素选择器》!important》行内样式》ID》CLASS》元素》*》继承》浏览器默认样式原创 2019-04-11 15:21:59 · 286 阅读 · 0 评论 -
CSS :focus使用
获取焦点时 , 通常用于input,修改样式!原创 2019-04-11 14:07:55 · 4040 阅读 · 0 评论 -
overflow 溢出处理
overflow版本:CSS2 继承性:无语法:overflow:<overflow-style>{1,2}<overflow-style> = visible | hidden | scroll | auto默认值:visible取值:visible:不剪切内容。hidden:将超出对象尺寸的内容进行裁剪,将不出现滚动条。...原创 2019-03-22 17:12:26 · 80410 阅读 · 0 评论 -
CSS清除浮动
1.在父元素 设置 overflow:hidden2.在父元素的最后写一个空白的div 设置clear:left|right|both;3.给父元素加个hight高度!4.父元素::after{ content:''; display:block; clear:both;}...原创 2019-04-13 18:44:09 · 92 阅读 · 0 评论 -
position定位
static: 静态定位(其实就是没有定位)是一个元素的默认定位方式,也就是一个文档中元素的正常文档流所确定的定位。对其给定定位位置(top,left, right, bottom)的值无效。relative:相对定位相对于其本来应该所处的位置而设定一个相对性定位。需给定位置(top,left, right, bottom)会占有原文档位置absolute:绝对定位相对于其上层最...原创 2019-04-14 15:46:21 · 146 阅读 · 2 评论 -
list-style
列表样式主要是设置ul或ol前面的那个“列表符”的特性,包括:list-style-type:用于设置列表样式的类型,比如原点(disc),圆圈(circle),阿拉伯数字(decimal),罗马数字,英文字母。有了这个属性,对ul和ol来说,就没有差别了!list-style-image用于设置列列表前面的小图标(图像),也就是说,用一个图片来代替上面的列表符。如果设置了这项...原创 2019-04-14 17:56:37 · 2981 阅读 · 0 评论 -
表格样式
表格样式主要是从整体上设置一个表格的外观表现,而不涉及到具体的每一个单元格。表格样式的属性主要包括:border-collapse:设置表格的单元格边线是否合并;有两个值可用:separate(分离,这是默认值),collapse(合并)border-spacing:设置表格单元格之间的间隙大小。注意:只有在border-collapse的值为separate时才有效。ca...原创 2019-04-14 18:43:45 · 776 阅读 · 0 评论 -
弹性布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> /* ...原创 2019-04-26 17:29:22 · 310 阅读 · 0 评论 -
背景图高级特性
background-color: 设置背景颜色。background-image: 设置背景图像源文件。background-repeat: 设置背景图像的重复性,可用值:repeat, no-repeat, repeat-x, repeat-y。background-position: 设置背景图片起始位置或定位位置。background: 上述几个属性的综合属性。有...原创 2019-04-17 21:35:39 · 248 阅读 · 0 评论 -
颜色渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> div.box{ width: 200px;...原创 2019-04-22 20:43:35 · 655 阅读 · 0 评论 -
动画之风车2
animation-name:动画名;animation-duration:动画持续时间;animation-timing-function:动画播放播放方式(效果),也有如下几个常用的效果名:linear:线性过渡,就是匀速进行ease:平滑过渡,这是默认值ease-in:由慢到快。ease-out:由快到慢。ease-in-out:由慢到快再到慢。animation-dela...原创 2019-05-01 22:02:37 · 186 阅读 · 0 评论 -
动画3旋转美女墙
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> @keyframes xuanzhuan{ 0...原创 2019-05-01 23:15:03 · 245 阅读 · 0 评论 -
总结下过渡+动画
过度过渡(transition):概念:就是用于设定一个元素(盒子)在两个不同状态(常规和:hover)的情况下,从一个状态变化到另一个状态的过程中以“渐变”的方式进行变换。单个属性:transition-property:想要设置过渡的属性名;(比如:transform, width, height, backgroud, color, )transition-duration: ...原创 2019-05-02 20:41:45 · 486 阅读 · 0 评论 -
动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> /* @keyframes 设置动画*/ @ke...原创 2019-04-30 21:24:45 · 219 阅读 · 0 评论