2024-04-05 分类: 网站建设
css3的更新主要包括选择器、样式、布局、动画以及浏览器等方面的变化,今天成都做网站公司就对css3技术简单的分析一下:
1、css3--选择器
兄弟选择器--div~img
属性选择器--a[href$=`.pdf`], a[href^=`mailto`], a[class=‘item’]
伪类选择器--:nth-child[n], :nth-last-child[n], :last-child, :checked, :empty, :only-child, :nth-oftype[odd], :nth-of-type[even]
2、css3--样式
文本换行--word-wrap: normal|break-word
调整元素尺寸--resize: both|horizontal|vertical
圆角--border-radius: 3px – -moz-border-radius-topleft – -webkit-border-top-left-radius
阴影--box-shadow: 5px 5px 5px rgba[0, 0, 0, 0.5] – text-shadow: 2px 2px #444, 3px 3px #555
渐变--background: -moz-linear-gradient[20%, center, 30%, center, from[blue], to[yellow]] no-repeat;
透明--opacity: 0.5; ? rgba – color: rgba[0, 255, 0, 0.5]; ? hsl/a – color: hsl[240, 50%, 50%]; hsla[240, 50%, 50%, 0.5]
边框背景--border-image: url[border.png] 27 27 27 27 round round;
背景--background-size: 100px 50px; – background-origin: content-box|border-box|paddingbox; – background-clip: border-box|padding-box
自定义字体--@font-face{ font-family: adam, src:url[adam.ttf]; } p{font-family:adam, serif;}
3、css3--布局
盒模型--box-sizing: content-box|border-box;
网格模型--column-: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black;
css table display--#content{display: table;} #main{display: table-cell; width:620px; padding-right: 22px;} #side{display: table-cell; width: 300px;}
outline--outline-offset
4、css3--动画
变换--transform: rotate[30deg]; – transform: scale[0.5, 2.0]; – transform: skew[-30deg]; – transform: translate[30px, 0];
过渡--transition: all 1s ease-out ;
动画--animation: greenpulse infinite ease-in-out 3s;
媒体查询--.entry{color: red;} @media all adn {min-width: 100em}{ .entry{color: black;} }
语音支持--voice-volume, voice-balance, voice-family
5、ss3的应用原则以及浏览器前缀
firefox: -moz-box-shadow
safari: -webkit-box-shadow
opera: -o-box-shadow
ie: -ms-box-shadow
优雅降级--对于不支持css3的浏览器可用 javascript来实现。
本文标题:成都做网站分析css3新功能
链接地址:https://www.cdcxhl.com/news8/322358.html
成都网站建设公司_创新互联,为您提供服务器托管、外贸网站建设、做网站、手机网站建设、移动网站建设、网页设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容