CSS3新特性有哪些?

时间: 2019-05-11阅读: 282标签: css3

一、css3的新选择器

E:nth-child(n) 选择器匹配其父元素的第n个子元素,不论元素类型,n可以使数字,关键字,或公式

E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

E:frist-child 相对于父级做参考,“所有”子元素的第一个子元素,并且“位置”要对应

E:frist-of-type 相对于父级做参考,“特定类型”(E)的第一个子元素

E:empty 选择没有子元素的每个E元素

E:target 选择当前活动的E元素

::selection 选择被用户选取的元素部分

属性选择器

E[abc*="def"] 选择adc属性值中包含子串"def"的所有元素


二、文本

text-shadow:2px 2px 8px #000;参数1为向右的偏移量,参数2为向左的偏移量,参数3为渐变的像素,参数4为渐变的颜色

text-overflow:规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)

text-wrap:规定文本换行的规则

word-break 规定非中日韩文本的换行规则

word-wrap:对长的不可分割的单词进行分割并换行到下一行

white-space:规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行


三、边框

border-raduis 边框的圆角

border-image 边框图片

.border-image {
    border-image-source:url(images/border.png);
    boder-image-slice:27;
    border-image-width:10px;
    border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角,只适应与四边  
}


四、背景

rgba

backgrounnd-size:cover/contain,其中background-size:cover,会使“最大”边进行缩放,另一边同比缩放,铺满容器,超出部分会溢出。background-size:contain,会使“最小”边进行缩放,另一边同比缩放,不一定铺满容器,会完整显示图片


五、渐变

linear-gradient

background-image:linear-gradient(90deg,yellow 20%,green 80%)

radial-gradient

background-iamge:radial-gradient(120px at center center,yellow,green)


六、多列布局

column-count

column-width

column-gap

column-rule


七、过渡

transition

transition-property:width //property为定义过渡的css属性列表,列表以逗号分隔

transition-duration:2s; //过渡持续的时间

transition-timing-function:ease;

transition-delay:5s //过渡延迟5s进行


八、动画、旋转

animation

transform :translate(x,y) rotate(deg) scale(x,y)

translate

scale

rotate

skew(倾斜)


九、flex布局


十、@media媒体查询

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8986

关闭

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

CSS3 transform详解,关于如何使用transform

transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。

css3中样式计算属性calc()的使用和总结

在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。

css3动画讲解,关于css3的@keyframes和animation

通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。

理解 CSS3中 object-fit

在检查网站的时候发现图片给于固定宽的时候,会压缩变形,要保证,img元素不变形,宽高比不变。从别人那里了解到object-fit,以前从未用过,所以就总结给自己看看,理解一下。

css3渐进增强 VS 优雅降级

进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。

纯css3实现饼状图

网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。

css3动画transition的使用和介绍

CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!