CSS3
CSS3重点记录
|不勤
寻找志同道合的伙伴们
展开
-
css3-transition
1. transition (过渡)transition 四个值依次是:transition-property: 规定应用过渡的 CSS 属性的名称。transition-duration: 定义过渡效果花费的时间。默认是 0。transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”。linear 规定以相同速度开始至结束的过渡效果e...原创 2019-06-28 01:01:14 · 231 阅读 · 0 评论 -
CSS3-弹性盒模型
1. flex 和 inline-flexflex: 将对象作为弹性伸缩盒显示inline-flex:将对象作为内联块级弹性伸缩盒显示2. flex-direction (属性规定项目的方向)row (默认值); 灵活的项目将水平显示,正如一个行一样row-reverse 与 row 相同,但是以相反的顺序。 尝试一下column 灵活的项目将垂直显示,正如一个列一样colum...原创 2019-06-10 03:33:55 · 222 阅读 · 0 评论 -
CSS-标准盒模型和IE6混杂模式
1. w3c标准盒模型以宽度举例(高度是同理的)boxWidth = 设置的宽( width ) + 边框的两边 ( border * 2 ) + 内边距两边(padding * 2)boxContentWidth ( 盒子内容区宽 ) = boxWidth2. IE6混杂模式 (怪异模式)box-sizing: border-box 触发ie6混杂模型 (默认值是 content-...原创 2019-06-09 05:56:00 · 396 阅读 · 0 评论 -
CSS3 之 background
1. background-image 引用background-image: url( xxx.jpg ) 可以引用多个元素background-image: url( xxx.jpg ) ,url(xxx.png)一个容器引用多张图片是在 css3 新增的一种功能,引用多张图片后,需要调整各自元素的位置,否则元素会重叠在一起。(在规范情况下很少使用!!!)一般在图片容错机制下...原创 2019-05-26 00:33:00 · 121 阅读 · 0 评论 -
CSS3 border-image
1. border-image 属性是一个简写属性,用于设置以下属性:border-image-source填充渐变颜色或者是图片border-image-slice 四条切割线方向 上右下左如下图:border-image-slice:100 100 100 100 (不能写单位) 假设为300 * 300像素的图片 切割之后的元素往边框...原创 2019-05-21 02:16:43 · 142 阅读 · 0 评论 -
CSS3 圆角与阴影
1. 决定 border-radius 的值是根据宽高计算的div{ width:100px; height:100px; border-radius:50%; /* border-radius: 50px;*/ /*根据自身宽高计算*/ }2. border-radius 四个方向值border-radius:10px四个方向的值都是10px;...原创 2019-05-20 23:55:26 · 445 阅读 · 0 评论 -
CSS3常用选择器
1.css3常用选择器:first-of-type 选中的元素在其类型中第一个元素不受其他元素节点的干扰:nth-last-child(n) 自然数从 1 开始 在其集合类中的最后一位开始算起:nth-of-type(n) n 自然数从 1 开始:empty 被选元素为空元素为空是指完全没有节点元素,注释也是元素为空:checked 选择器匹配每个选中的元素(仅适用...原创 2019-05-20 08:36:00 · 89 阅读 · 0 评论 -
css3多功能选择器
伪类 == 被动1. :not(选择元素):not(selector) 选择器匹配非指定元素/选择器的每个元素。小案例(最后的下边框去除):<style> ul{ width:300px; border:1px solid #999; } li{ height:50px; ...原创 2019-05-20 08:09:05 · 143 阅读 · 0 评论 -
CSS3兼容性
1.浏览器前缀缩写prefixbrowser-webkit-chrome、safari-moz-firefox-ms-IE-o-opera2.css3前缀由来css3 新标准制定出来后,由于各大厂商的先后使用了新标准,还有一部分厂商还没使用,先行使用新标准的厂商就制定了 前缀 来区分于其它厂商,后来新制定的标准慢慢普及,忽略前缀的写法就可以兼...原创 2019-05-20 01:38:34 · 298 阅读 · 0 评论