从零开始学习前端开发 — 16、CSS3圆角与阴影

【从零开始学习前端开发 — 16、CSS3圆角与阴影】的更多相关文章

从零开始学习前端开发 — 16、CSS3圆角与阴影

一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border-radius:50px 5px; 左上,右下为50px,右上,左下为5px 3.设置三个值 border-radius:10px 50px 20px; 左上为10px,右上,左下为50px,右下20px 4.设置四个值 border-radius:0px 10px 30px 50px; 顺时针方向依…

从零开始学习前端开发 — 11、CSS3选择器

一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择器) 1.后代选择器语法: E F eg: .box a{color:red;} 匹配.box中所有的子元素a 2.子代选择器语法: E>F eg: .box>a{color:red;} 匹配.box中第一级子元素a 3.相邻兄弟选择器语法: E+F eg: .box+h3{background:…

从零开始学习前端开发 — 17、CSS3背景与渐变

一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见二.背景原点: background-origin:padding-box|border-box|content-box; 作用:…

从零开始学习前端开发 — 15、CSS3过渡、动画

一.css3过渡语法: transition: 过渡属性过渡时间延迟时间过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性…

从零开始学习前端开发 — 14、CSS3变形基础

一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotateX(180deg) 沿x轴翻转等价于 rotate3d(1,0,0,180deg) b) rotateY(180deg) 沿y轴翻转等价于 rotate3d(0,1,0,180deg) c) rotate(60deg) 2d空间的旋转,正值为顺时针,负值为逆时针 d) rotateZ(180d…

从零开始学习前端开发 — 12、CSS3弹性布局

一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一即可 3.设置栏间距column-gap:数值+单位; 4.设置栏间隔线column-rule:5px solid|dashed|dotted black; 5.设置是否跨栏显示column-span:all(跨栏)|none(不跨栏); 注:a)给需要跨栏显示的元素设置该属性 b) 该属性只有ch…