
css3
文章平均质量分 66
TimChen666
持续学习的渣渣
展开
-
CSS3总结——选择器
基本选择器子元素选择器(IE8+)语法:父元素 > 子元素相邻兄弟元素选择器(IE8+)语法:元素 + 兄弟相邻元素通用兄弟元素选择器(IE8+)语法:元素 ~ 后面所有兄弟相邻元素群组选择器将具有相同样式的元素分组在一起,使用“,”隔开语法: 元素1 , 元素2 ,…元素n属性选择器对带有指定属性的HTML元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素原创 2017-09-08 15:57:28 · 324 阅读 · 0 评论 -
CSS3总结——边框与圆角
CSS3圆角border-radius (IE9+)可以为元素添加圆角边框 语法: border-radius : length | % 多个值 - 4个值 (左上角 右上角 右下角 左下角) - 3个值 (左上角 右上和左下角 右下角 ) - 2个值 ( 左上和右下角 , 右上和左下角)如果设置为50%,宽高不一样的情况下变椭圆,宽高一样变圆。其他属性:bo原创 2017-09-08 16:27:11 · 483 阅读 · 0 评论 -
CSS3笔记——背景
CSS3背景图像区域background-clip (IE9+)指定背景描绘区域 语法:background-clip: border-box | padding-box | content-boxborder-box:背景被裁剪到边框盒 (border部分也显示背景图)padding-box:背景被裁剪到内边距框 (padding部分也显示背景图)content-box:背景被裁剪到内容框原创 2017-09-08 16:52:27 · 316 阅读 · 0 评论 -
CSS3笔记——渐变
概念渐变,可以在两个或多个指定的颜色之间显示平稳的过渡。兼容性:IE10+、Chrome10、FireFox3.6、Safari5.1、Opear 11.6线性渐变沿着一根轴改变颜色,颜色从起点到终点进行顺序渐变(从一边拉向另一边)。从上到下(默认)语法:(前缀不同,其他一致)background:linear-gradient (color1, color2, ...) 实例:原创 2017-09-08 23:01:24 · 235 阅读 · 0 评论 -
CSS3笔记——过渡 Transition
过渡 Transition允许CSS属性值在一定的时间区内平滑地过渡,在鼠标单击、获得焦点、被点击或对元素做任何改变中触发,并圆滑地以动画效果改变CSS属性值。兼容性 :IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1+transition-property语法:transition-property: none | all |property参数原创 2017-09-09 11:46:20 · 394 阅读 · 0 评论 -
CSS3笔记——转换
CSS3 Transform让一个元素在坐标系统变形。包含一系列变形函数,可以移动、旋转和缩放元素。兼容性:IE12+、FireFox16+、Chrome36+、Safari16+、Opera23+ CSS 2D转换旋转rotate通过指定的角度参数,对于原元素指定一个2D旋转语法:transform: rotate(角度)参数说明:单位deg;原创 2017-09-09 16:47:13 · 463 阅读 · 0 评论 -
CSS3笔记——动画 animation
概念元素从一种样式逐渐变化另一种样式的效果。 兼容性IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+@keyframes创建动画,通过逐步改变从一个CSS样式设定到另一个。在动画过程中,可以通过@keynames规则多次改变CSS样式。语法:@keyframes animationname { keyframes-selector{ c原创 2017-09-09 17:59:05 · 547 阅读 · 0 评论 -
CSS3笔记——will-change
概念提前告诉浏览器要做什么动画,让其提前准备优化设置。 兼容性:IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+ 语法will-change: auto | scroll-position | contents | <custom-ident>参数说明:scroll-position:表示将要改变元素的滚动位置contents:表示将要改变元素的内容<c原创 2017-09-09 18:52:34 · 378 阅读 · 0 评论