CSS3
文章平均质量分 85
CSS3相关的知识
叨唠
弘德、博学、敏行、敢先
展开
-
媒体查询
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。2. css2中media查询:通过<link>标签的media属性为样式表指定设备类型:比如:...原创 2018-10-01 11:09:54 · 624 阅读 · 0 评论 -
css3——transition动画过渡(transition动画过渡可作用的属性),animation动画铺垫和@keyframes动画关键帧
css3动画优点:开启GPU加速,不会产生动画队列,即频繁点击按钮时,不会有多个动画在等待执行;1. transition: property duration timing-function delay;是个复合属性,包括:transition-property:设置过渡效果的 CSS 属性,值:all 所有变化的属性都过渡;某个css属性或某些css属性,用逗号隔开属性tran...原创 2018-09-29 21:24:53 · 1209 阅读 · 0 评论 -
css3——transform:rotate(旋转)、scale(缩放)、skew(拉伸)、translate(平移)、transform-origin
注意:transform是复合属性,拆开写会替代,先平移再旋转和先旋转再平移的结果是不同的1. CSS3 转换:transform属性可以对元素进行移动、缩放、转动、拉长或拉伸注意:Internet Explorer 9 要求前缀 -ms- 版本,Internet Explorer 10, Firefox, 和 Opera支持transform 属性,Chrome 和 Safari 要求...原创 2018-09-28 23:05:47 · 18008 阅读 · 1 评论 -
css3文本效果——文字阴影和文字换行
1. 文字阴影:text-shadowtext-shadow: h-shadow v-shadow blur color;text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。值 描述 测试 h-shadow 必需。水平阴影的位置。向左为正值,允许负值。 测...原创 2018-09-28 19:19:35 · 669 阅读 · 0 评论 -
css3字体@font-face
字体对该文章的理解:文章转自http://www.w3cplus.com/content/css3-font-face1、@font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source>...转载 2018-09-28 16:17:17 · 391 阅读 · 0 评论 -
css3圆角、边界图片、盒子阴影、背景大小、填充位置、定位位置、背景颜色渐变
1. css3圆角:border-radius(1)这是个复合属性:比如:border-radius:10px;== border-radius:10px 10px 10px 10px;对应的四个角:左上角,右上角,右下角,左下角== 四个值分别对应:border-top-left-radius: 10px、border-top-right-radius: 10px;、border-b...原创 2018-09-28 13:03:49 · 1039 阅读 · 0 评论 -
css3简介
1. 在编写css3样式时,不同的浏览器可能需要不同的前缀。因为css3的一些属性尚未成为w3c标准,是浏览器私有属性;虽然目前较新版本的浏览器基本上实现了css3所有功能,但是为了兼容之前的版本,最好还是要加上前缀。前缀 浏览器 -Webkit Chrome 和Safari -moz Firefox -ms IE -o Opera ...原创 2018-09-28 11:05:33 · 467 阅读 · 0 评论 -
css3的练习题
练习题:(1)css3选项卡功能、(2)钟表、(3)旋转木马1. 用css3实现选项卡功能:原理:每一个选项后紧跟着内容标签,用 + 选择器来绑定选项和内容,当选中某一个时,对应的内容display:inline-block展现出来。<!DOCTYPE html><html lang="en"><head> <meta chars...原创 2018-09-27 22:59:05 · 3168 阅读 · 0 评论 -
css3选择器
css3选择器参考手册:http://www.runoob.com/cssref/css-selectors.html,里面有css1 2 3的选择器的列表1. 属性选择器(属性+特性)属性选择器结合了正则表达式中的^开头、$结尾、*任意位置比如:a[src^="https"]:选择每一个src属性的值以"https"开头的a标签a[src$=".pdf"]:选择每一个src属...原创 2018-09-27 22:57:32 · 1233 阅读 · 0 评论 -
css3弹性盒子display:flex
css3的flexbox详细介绍:https://css-tricks.com/snippets/css/a-guide-to-flexbox/原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/浏览器的支持情况:Chrome Safari Firefox Opera IE Edge ...转载 2018-10-02 17:55:19 · 13971 阅读 · 0 评论 -
IE6混杂模式盒模型
1. w3c标准中的盒模型:border + padding + content其中在设置的width 和 height 是content内容区的宽和高;box-sizing:content-box;盒子的宽高大小是到内容区2. IE6混杂模式的盒模型:width和height是指:border+padding+contentbox-sizing:border-box;盒子的宽高大...原创 2018-10-02 10:58:33 · 657 阅读 · 0 评论 -
css3的多列布局(columns)
多列布局:可以实现web页面像报纸、杂志那样的布局1. column-count:number;设置列数2. column-gap:50px | 2em;设置列之间的间隙3. column-rule:设置列之间的分隔线复合属性:column-rule-width、column-rule-style、column-rule-color注意:该线浮在column之上,比内容的层级高...原创 2018-10-02 10:45:33 · 312 阅读 · 0 评论 -
css3——3D动画、transform-style:preserve-3d、transform:perspective()、perspective-origin
1. transform-style:preserve-3d,该属性设置在父级元素中,它的子级元素具有3d效果注意:设置了该属性,就不能防止子级元素溢出,即不能设置overf:hidden属性;如果设置了overflow:hidden,那么transform-style:preserve-3d就无效。2. transform:perspective;景深,观察者到物体的距离;单位:px,比...原创 2018-09-30 15:59:44 · 7963 阅读 · 0 评论