成都做网站分析css3新功能

成都做网站公司对css3技术简单的分析一下。

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。内容未经允许不得转载，或转载时需注明来源： 创新互联