CSS3の新機能、互換性、互換性方法のまとめ_html/css

CSS3 の新機能、互換性、互換性方法のまとめ

css3 マニュアルcss3 マニュアル

border

border-radius

丸みを帯びた角を追加するために使用されます。

border-radius: [ ] {1,4} [ / [ パーセント> ]{1,4} ]?

: 長さの値を使用して、オブジェクトのフィレット半径の長さを設定します。負の値は許可されません

: オブジェクトの角の半径の長さをパーセントで設定します。負の値は許可されません

例:

border-radius:10px;

border-radius:5px 10px 15px 20px; // 順序は時計回りです。 radius:26px 106px 162px 32px/28px 80px 178px 26px; //標準構文形式

border-radius:50%; //要素が占めるサイズに対する相対的なパーセンテージ、つまり要素を含めた後のサイズです。ボーダーとパディング

互換性:

.radius{    border-top-left-radius:5px;      //左上角，注意顺序是先上下后左右    border-top-right-radius:10px;    //左上角    border-bottom-left-radius:15px;  //左下角    border-bottom-left-radius:20px;  //右上角    background-color:red;  //即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。}

ログイン後にコピー

IE9+、Firefox4+、Chrome5+、Safari5+、Opera01.5+、iOS Safari4+、Android Browser2.2+、Android Chrome18+

互換性方法:

chrome の下位バージョン: -webkit-border-radius:10px; Firefox の下位バージョン: -moz-border-radius:10px;

IE6/7/8: ie-css3 を導入します。互換性のあるファイル、黒 (# 000) はサポートされていません

詳細については、IE6/IE7/IE8 ブラウザーの CSS3 プロパティのサポートを参照してください

詳細については、border-radius <🎜 を参照してください>

box-shadow

シャドウ効果を追加するために使用されます

構文:

box-shadow: none|[&& [

???]]#

inset: オブジェクトのシャドウタイプをインナーシャドウに設定します。この値が空の場合、オブジェクトのシャドウタイプはアウターシャドウです。

: これが水平オフセットを設定する最初の長さの値です。負の値の場合、シャドウは次のようになります。要素の左側にあります。

: 垂直オフセットを設定する 2 番目の長さの値です。負の値の場合、影は要素の上に配置されます。

: これは 3 番目の長さの値です。値が大きいほど、グー領域が大きくなり、影が大きく明るくなります。負の値は指定できません。デフォルトは 0 で、この場合、影のエッジはシャープになります。

: オブジェクトの影の色を設定します。

例:

box-shadow: 10px 10px 5px #888;

box-shadow: 3px 3px green, -1em 0 0.4em gold

互換性：

IE9.0+、Firefox4.0+、Chrome10.0+、Safari5.1+、Opera10.5+、iOS Safari5.0+、Android Browser4.0+、Android Chrome18.0+

互換性のあるメソッド:

chrome の下位バージョン: -webkit-box-shadow:10px 10px 5px #888; firefox の下位バージョン: -moz-box-shadow:10px 10px 5px #888; 🎜>IE6/7/8: ie-css3 互換ファイルを導入し、黒 (#000) 以外の色をサポートしません

詳細については、IE6/IE7/IE8 ブラウザの CSS3 属性サポートを参照してください

詳細については、box-shadow

border-image

要素 border に背景画像を追加するために使用されます

構文:

<' border-image-source '>: オブジェクトの境界線がイメージ定義スタイルを使用するか、イメージソースパスを使用するかを設定または取得します。

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

ログイン後にコピー

<' border-image-slice '>: オブジェクトの境界背景画像の分割方法を設定または取得します。この属性は、画像を上下左右の方向から分離することを指定します。、画像は 4 つに分割されます。合計 9 つの角、4 つの辺、中央の領域があります。キーワード fill が追加されない限り、中央の領域は常に透明になります (つまり、画像の塗りつぶしはありません)。

<' border-image-width '>: オブジェクトの境界線の太さを設定または取得します。

<' border-image-outset '>: 境界ボックスのサイズを超えるオブジェクトの境界画像を設定または取得します。

<' border-image-repeat '>: オブジェクトの境界線イメージのリピート、ラウンド、ストレッチのタイリング方法を設定または取得します。

例:

border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 ラウンド

border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 ストレッチ;

互換性:

IE11+、Firefox15+、Chrome16+、Safari6+、Opera15+ 、iOS Safari6 以降、Android ブラウザ 4.4 以降、Android Chrome18 以降

対応メソッド:

chrome の下位バージョン: -webkit-border-image:url("http://www.w3school . com.cn/i/border.png") 30 30 ストレッチ; Firefox の下位バージョン: -moz-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 ストレッチ; Opera の下位バージョン: -o-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 ストレッチ

IE は解決されません

詳細はborder-image、border-image

Background

background-size

背景画像のサイズを設定します。

構文:

背景サイズ: # | cover | contains

<長さ>: 長さの値を使用して背景画像のサイズを指定します。負の値は許可されません。

：用百分比指定背景图像大小。不允许负值。

auto：背景图像的真实大小。

cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

实例：

background-size: cover;

background-size: contain;

兼容性：

IE9+,Firefox4+, Chrome15+,Safari7+, Opera15+, iOS Safari7+, Android Browser4.4+, Android Chrome18+

兼容方法：

低版本的chrome: -webkit-background-size:10px 10px 5px #888; 不支持background简写

低版本的firefox: -moz-background-size:10px 10px 5px #888;

IE8：

方法一(推荐)、引入backgroundsize.min.htc兼容文件

.size {width: 400px;height: 400px;margin: 20px auto 0;background:  green url(img/1.jpg) no-repeat scroll center 0;background-size: cover;-ms-behavior: url(js/backgroundsize.min.htc);}

ログイン後にコピー

方法二、针对IE8的hack

<!--[if IE 8]> <style type="text/css"> .size{ -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/1.jpg', sizingMethod='scale')"; }  //该函数只能模仿cover值,IE8下效果与IE9/10稍有不同,图片占满背景大小且不超出 </style><![endif]-->

ログイン後にコピー

详情参阅 background-size

background-origin

指定背景图片background-image 属性的原点位置的背景相对区域,当使用 background-attachment 为fixed时，该属性将被忽略不起作用

语法：

background-origin：# = border-box | padding-box | content-box

padding-box：从padding区域（含padding）开始显示背景图像。

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像

实例：

background-origin:content-box;padding:10px;

111111111111111111111111111

background-origin:border-box;padding:10px;border:15px solid transparent;

111111111111111111

兼容性：

IE9+,Firefox4.0+ Chrome4.0+ Safari6.0+, iOS Safari6.0+, Android Browser3.0+, Android Chrome18+

兼容方法：

firefox4.0以下： -moz-background-origin:padding | border; 没有content

IE8下background-origin默认为padding-box

详情参阅 background-origin

background-clip

设置元素的背景（背景图片或颜色）是否延伸到边框下面。

语法：

background-clip：# = border-box | padding-box | content-box | inherit

border-box背景延伸到边框外沿（但是在边框之下）。

padding-box边框下面没有背景，即背景延伸到内边距外沿。

content-box背景裁剪到内容区 (content-box) 外沿。

实例：

background-clip:border-box;

111111111111111

兼容性：

IE9+,Firefox4.0+, Chrome4.0+, Safari6.0+,iOS Safari6.0+, Android Browser3.0+, Android Chrome18.0+

兼容方法：

firefox4.0以下： -moz-background-origin:padding | border; 没有content

IE8下background-origin默认为padding-box

multiple backgrounds

语法：

background：[ , ]* = || [ / ]? || || || || =||[/]?||||||||||<'background-color'>

实例：

background:    url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,    url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,    url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;

ログイン後にコピー

兼容性：

IE9+,Firefox3.6+, Chrome4.0+, Safari3.1+

兼容方法：

未解决

文本

text-shadow

为文字添加阴影

语法：

textshadow：none | [inset? && [ ?? ] ]#

inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

: 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。

: 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。

:这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。

：设置对象的阴影的颜色。

实例：

text-shadow:1px 1px 2px red;

12212121

兼容性：

IE10+, Firefox3.5+, Chrome4.0+, Safari6.0+

兼容方法：

低版本的chrome: -webkit-text-shadow:1px 1px 1px #000; 低版本的firefox: -moz-text-shadow:1px 1px 1px #000;

IE6/7/8:引入ie-css3兼容文件,不支持除了黑色(#000)以外的其他颜色

详情参阅让IE6/IE7/IE8浏览器支持CSS3属性

word-wrap

浏览器是否允许单词中断换行

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap

当你使用 <' overflow-wrap '> 时，最好同时使用 <' word-wrap '> 作为备选，作向前兼容。

语法：

word-wrap：normal | break-word

实例：

word-wrap: break-word;

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

兼容性：

IE6+,Firefox3.5+, Chrome4+, Safari6+, iOS Safari6+, Android Browser2.1+, Android Chrome18+

兼容方法：

文字

@font-face

能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

语法：

@font-face {    font-family: <YourWebFontName>;    src: <source> [<format>][,<source> [<format>]]*;    [font-weight: <weight>];    [font-style: <style>];}

ログイン後にコピー

实例：

@font-face {    font-family: 'YourWebFontName';    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */    font-weight: normal;    font-style: normal;}

ログイン後にコピー

兼容性：

几乎所有浏览器也支持的网络字体@font-face的用法

兼容方法：

详情参阅 @font-face

2D3D转换

transform

元素可以按照设定的值变形、旋转、缩放、倾斜

语法：

transform ： none | [ ]* transform-function list:

matrix() = matrix([,]{5,5})
matrix3d() = matrix3d([,]{15,15})
translate() = translate([,]?)
translate3d() = translate3d(,,)
translatex() = translatex()
translatey() = translatey()
translatez() = translatez()
rotate() = rotate()
rotate3d() = rotate3d(,,,)
rotatex() = rotatex()
rotatey() = rotatey()
rotatez() = rotatez()
scale() = scale([,]?)
scale3d() = scale3d(,,)
scalex() = scalex()
scaley() = scaley()
scalez() = scalez()
skew() = skew([,]?)
skewx() = skewx()
skewy() = skewy()
perspective() = perspective()
<translation-value> = <length> | <percentage>

实例：

transform:none;
transform:rotate(30deg) scale(0.5);//大家记住了是空格隔开 transform:skew(45deg); transform:translate(100px 20px);

兼容性：

IE9+, Firefox3.5+, Chrome4.0+, Safari6.0+, iOS Safari8.4+, Android Browser4.4+, Android Chrome34+

兼容方法：

.transform{    -webkit-transform: x,y;    -moz-transform: x,y;    -ms-transform: x,y;    -o-transform: x,y;    transform: x,y;}

ログイン後にコピー

IE9以下不支持

详情参阅 transform

过渡

transition

css的属性值在一定的时间区间内平滑地过渡

语法：

transition ：[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition-property ： none | all | [ ] [ ',' ]* 检索或设置对象中的参与过渡的属性

transition-duration ： [, ]* 检索或设置对象过渡的持续时间

transition-delay ： [, ]* 检索或设置对象延迟过渡的时间

实例：

transition: all .5s ease-in-out 1s;

兼容性：

IE10+, Firefox16+, Chrome26+ ,Safari6.1+ , iOS Safari7+, Android Browser4.4+, Android Chrome25+

兼容方法：

p {  -webkit-transition: all .5s ease-in-out 1s;  -moz-transition: all .5s ease-in-out 1s;  -o-transition: all .5s ease-in-out 1s;  transition: all .5s ease-in-out 1s;}

ログイン後にコピー

IE9以及更早的版本，不支持 transition 属性。

详情参阅 transition

动画

animation

检索或设置对象所应用的动画特效。

语法：

animation：[,]* = || || || || || || ||

<' animation-name '>：检索或设置对象所应用的动画名称

<' animation-duration '>：检索或设置对象动画的持续时间

<' animation-timing-function '>：检索或设置对象动画的过渡类型

<' animation-delay '>：检索或设置对象动画延迟的时间

<' animation-iteration-count '>：检索或设置对象动画的循环次数

<' animation-direction '>：检索或设置对象动画在循环中是否反向运动

<' animation-fill-mode '>：检索或设置对象动画时间之外的状态

<' animation-play-state '>：检索或设置对象动画的状态。

实例：

.animation:hover{    -webkit-animation:animated_div 5s 1;    -moz-animation:animated_div 5s 1;    animation:animated_div 5s 1;}@keyframes animated_div{    0%      {transform: rotate(0deg);left:0px;}    25%     {transform: rotate(20deg);left:0px;}    50%     {transform: rotate(0deg);left:500px;}    55%     {transform: rotate(0deg);left:500px;}    70%     {transform: rotate(0deg);left:500px;background:#1ec7e6;}    100%    {transform: rotate(-360deg);left:0px;}}

ログイン後にコピー

兼容性：

IE10+,Firefox16+, Chrome43+, Safari9+

兼容方法：

低版本的chrome:-webkit-

低版本的firefox：-moz-

IE9及以下不支持

详情参阅 animation

@keyframes

用于创建动画

语法：

@keyframes IDENT {      0% {         Properties:Properties value;      }      Percentage {         Properties:Properties value;      }      100% {         Properties:Properties value;      }}

ログイン後にコピー

实例：

见上例

兼容性：

IE10+,Firefox16+, Chrome43+, Safari9+

兼容方法：

低版本的chrome:-webkit-

低版本的firefox：-moz-

IE9及以下不支持

详情参阅 animation

颜色

linear-gradient radial-gradient

实现真实的渐变效果。

语法：

= linear-gradient([ [ | to ] ,]? [, ]+) = [left | right] || [top | bottom] = [ | ]? ：用角度值指定渐变的方向（或角度）。用于指定渐变的起止颜色：

实例：

background:linear-gradient(to bottom, #fff 0%, red 100%);

background:radial-gradient(#fff 0%, red 100%);

兼容性：

IE10+, Firefox16+, Chrome26+, Safari6.1+

兼容方法：

低版本的chrome:-webkit-

低版本的firefox：-moz-

IE9及以下不支持

详情参阅 gradient

rgba(r,g,b,a)

设置颜色red+green+blue+alpha

语法：

rgba(r,g,b,alpha)

实例：

rgba(255,0,0,.2)

兼容性：

IE9+, Firefox2+, Chrome4+, Safari3+, iOS Safari3.2+, Android Browser2.1+, Android Chrome18+

兼容方法：

IE6/7/8不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理

-m-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);

详情参阅 IE8下兼容rgba颜色的半透明背景

flex布局

Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

flex

设置或检索弹性盒模型对象的子元素如何分配空间。用在子容器上

语法：

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '> 默认值为0 1 auto，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 flex-grow：设置或检索弹性盒的扩展比率。默认为0,如果所有子容器的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子容器的flex-grow属性为2，其他都为1，则前者占据的剩余空间将比其他项多一倍。 flex-shrink：设置或检索弹性盒的收缩比率。如果所有子容器的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子容器的flex-shrink属性为0，其他子容器都为1，则空间不足时，前者不缩小。 flex-basis： | | auto | content 定义了在分配多余空间之前，子容器占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子容器的本来大小。

实例：

.parent{     display:-webkit-flex;  //低版本的chrome    display:-moz-box;      //低版本的firefox    display:-ms-flexbox;   //IE10    display:flex;     width:600px; height:100px;border:1px solid #000; }.parent div{    -webkit-flex:1;    -moz-box-flex:1;    -ms-flex:1;    flex:1;    border:1px solid red;}

ログイン後にコピー

children1

children2

children3

兼容性：

IE11+,Firefox22+, Chrome21+, Safari6.1+

兼容方法：

低版本的chrome:-webkit- 或者 -webkit-box-flex

低版本的firefox：-moz-box-flex:1;

IE10:-ms-flex:1;

box-flex效果类似于过渡版本和新版本的flex属性；

详情参阅 flex

flex-flow

设置或检索弹性盒模型对象的子元素排列方式。用在父容器上

语法：

flex-flow：<' flex-direction '> || <' flex-wrap '> <' flex-direction '>：定义弹性盒子元素的排列方向。 flex-direction：row | row-reverse | column | column-reverse

row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse：对齐方式与row相反。
column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse：对齐方式与column相反。

<' flex-wrap '>控制flex容器是单行或者多行. flex-wrap：nowrap | wrap | wrap-reverse

nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。

实例：

flex-flow:row nowrap

flex-flow:row wrap-reverse

flex-flow:column wrap-reverse;

兼容性：

IE11+, Firefox28+, Chrome29+, Safari9+

兼容方法：

可以通过box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果；

可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果；

可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果；

可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果；

box-lines效果类似于过渡版本和新版本的flex-wrap属性

justify-content

设置或检索弹性盒子元素在主轴（横轴）方向上的定位方式。

语法：

justify-content：flex-start | flex-end | center | space-between | space-around

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与边框的间隔大一倍

实例：

兼容性：

IE11+, Firefox22+, Chrome29+, Safari9+

兼容方法：

详情参阅 justify-content

align-content

调整伸缩子元素在侧轴(纵轴)上的定位方式，如果子元素只有一根轴线，该属性不起作用

语法：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

实例：

兼容性：

IE11+, Firefox22+, Chrome29+, Safari9+

兼容方法：

低版本的chrome：-webkit-

box-pack效果等同于过渡版本的flex-pack属性和新版本的justify-content属性；

详情参阅 align-content

align-items

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的定位方式。

语法：

align-items：flex-start | flex-end | center | baseline | stretch

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

实例：

兼容性：

IE11+, Firefox22+, Chrome29+, Safari9+

兼容方法：

低版本的chrome：-webkit-

box-align效果等同于过渡版本的flex-align属性和新版本的align-items属性；

详情参阅 align-items

align-self

定义flex子项单独在侧轴（纵轴）方向上的对齐方式。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

语法：

实例：

兼容性：

IE11+, Firefox22+, Chrome29+, Safari9+

兼容方法：

低版本的chrome：-webkit-

详情参阅 align-self

order

设置或检索弹性盒模型对象的子元素的排列顺序。数值越小，排列越靠前，默认为0。

语法：

order：<integer>默认为0

实例：

兼容性：

IE11+, Firefox22+, Chrome29+, Safari9+

兼容方法：

低版本的chrome：-webkit-

box-oridinal-group效果等同于过渡版本的flex-order属性和新版本的order属性；

详情参阅 order

其他

box-sizing

用来改变默认的 CSS 盒模型对元素宽高的计算方式

语法：

box-sizing：content-box | border-box

content-box：

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

border-box：

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

实例：

box-sizing：content-box

box-sizing：border-box

兼容性：

IE8+, Firefox29+, Chrome10+, Safari6+

兼容方法：

详情参阅 box-sizing

resize

设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。多用于textarea元素

语法：

resize：none | both | horizontal | vertical

实例：

resize:none

ログイン後にコピー

兼容性：

Firefox Chrome Safari现代版都兼容

兼容方法：

IE全不兼容

CSS3の新機能、互換性、互換性方法のまとめ_html/css_WEB-ITnose